概述
本 Demo 展示了如何在导入 Excel 文件时，将工作表表格自动转换为绑定到数据管理器的数据表。通过开启 convertSheetTableToDataTable 选项，可以显著提高导入性能，并使表格数据能够利用数据管理器的强大功能。同时，Demo 还演示了导出时如何通过 includeBindingSource 选项保存绑定源数据。
实现思路
创建 SpreadJS 工作簿实例，初始化表格容器
加载自定义组件 sjs-demo-table-import-excel，提供导入导出功能的交互界面
通过组件的 setSpread 方法传入工作簿实例和资源路径，完成初始化
组件内部提供选项让用户开启表格转换功能，并在导入导出时应用相应的配置
代码解析
初始化工作簿和自定义组件
这段代码创建了 SpreadJS 工作簿实例，并通过自定义组件 sjs-demo-table-import-excel 提供导入导出功能。组件提供了用户界面来配置导入导出选项，包括是否启用表格转换功能。
导入时的表格转换选项
在实际导入 Excel 文件时，需要在 ImportXlsxOptions 中设置 convertSheetTableToDataTable 为 true：
导出时的绑定源保存选项
导出到 Excel 时，需要在 ExportXlsxOptions 中设置 includeBindingSource 为 true：
运行效果
页面加载后显示一个 SpreadJS 表格控件和一个配置面板
用户可以在配置面板中选择要导入的 Excel 文件
开启表格转换选项后导入文件，工作表中的表格会自动转换为数据管理器数据表
转换后的表格能够利用数据管理器进行高效的数据操作和绑定
导出时开启包含绑定源选项，可以将绑定数据完整保存到 Excel 文件
导入过程中，基于列的公式会被转换，基于单元格的公式会被移除
API 参考
ImportXlsxOptions.convertSheetTableToDataTable
类型：boolean
默认值：false
说明：是否将工作表表格转换为数据管理器表格
注意：导入时基于单元格的公式会被移除，基于列的公式会被转换
ExportXlsxOptions.includeBindingSource
类型：boolean
默认值：false
说明：保存到 Excel 文件时是否包含绑定源数据
window.onload = () => {
let spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
initSpread(spread);
};
async function initSpread(spread) {
const loadingTip = addLoadingTip();
const tableImportExcel = document.getElementById('options-container');
await tableImportExcel.setSpread(spread, '$DEMOROOT$/');
loadingTip.remove();
}
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta name="spreadjs culture" content="zh-cn"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-io/dist/gc.spread.sheets.io.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/data/table-dm/table-import-excel-component.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="sample-tutorial">
<div id="ss" class="sample-spreadsheets"></div>
<sjs-demo-table-import-excel id="options-container" class="options-container"></sjs-demo-table-import-excel>
</div>
</body>
</html>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: calc(100% - 280px);
height: 100%;
overflow: hidden;
float: left;
}
.options-container {
float: right;
width: 280px;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
overflow: auto;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
