如何通过SpreadJS导入单独的Sheet

收藏

本帖最后由 ClarkPan 于 2018-1-31 16:07 编辑

众所周知，SpeadJS是一款纯前端的类Excel控件，可以导入导出Excel。但是往往用户有这样的需求，需要将不同Excel之间的Sheet合并到一个工作簿中。这时候往往束手无策，其实SpreadJS稍微进行一下扩展，就可以支持这样的功能了。接下来，让我们一步一步来实现这样的功能。
环境准备
首先添加相关的JS,CSS引用以及部署授权

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Spread HTML Page</title>
<link href="http://cdn.grapecity.com/spreadjs/hosted/css/gc.spread.sheets.excel2013white.10.3.1.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://cdn.grapecity.com/spreadjs/hosted/scripts/gc.spread.sheets.all.10.3.1.min.js"></script>
<script type="text/javascript" src="http://cdn.grapecity.com/spreadjs/hosted/scripts/interop/gc.spread.excelio.10.3.1.min.js"></script>
</head>
</body>
</html>

复制代码

<script>
GC.Spread.Sheets.LicenseKey = "<Your Deployment Key>";
</script>

复制代码

之后设置承载spread的div，注意这里需要设置两个一个是隐藏起来不显示的。

<body>
<div id="hiddenWorkbook" style="display:none; width: 800px; height: 600px; border: 1px solid gray"></div>
<div id="ss" style="width: 800px; height: 600px; border: 1px solid gray"></div>
</body>

复制代码

初始化Spread

var hiddenWorkbook, excelIO, spread;
window.onload = function () {
excelIO = new GC.Spread.Excel.IO();
hiddenWorkbook = new GC.Spread.Sheets.Workbook(document.getElementById("hiddenWorkbook"));
spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
}

复制代码

导入相关实现
首先，我们需要建立相关导入的按钮

<input type="file" name="files[]" id="fileDemo" accept=".xlsx,.xls" />
<input type="button" id="loadExcel" value="Import" onclick="ImportFileStart()" />

复制代码

之后创建相关逻辑

function ImportFileStart() {
var excelFile = document.getElementById("fileDemo").files[0];
excelIO.open(excelFile, function (json) {
var workbookObj = json;
hiddenWorkbook.fromJSON(workbookObj);
}, function (e) {
console.log(e);
});
}

复制代码

并将需要合并的Sheet所在的Excel导入至hiddenWorkbook中去。
创建后效果如下：
image.png861929321.png

接下来我们需要创建一个下拉菜单来供用户选择需要导入的Sheet

<div id="sheetSelection" style="display:none;">
<p style="display:inline">Select sheet to load: </p>
<select id="sheetSelect" style="display:inline"></select>
</div>
function CreateSheetSelect() {
var sheetSelectionDiv = document.getElementById('sheetSelection');
sheetSelectionDiv.style.display = "inline";
var dropDown = document.getElementById('sheetSelect');
for (var s = 0; s < hiddenWorkbook.getSheetCount(); s++) {
dropDown.options[dropDown.options.length] = new Option(hiddenWorkbook.sheets[s].name(), s);
}
}