本文由葡萄城技術團隊於博客園原創並首發。轉載請註明出處:葡萄城官網,葡萄城爲開發者提供專業的開發工具、解決方案和服務,賦能開發者。
前言|問題背景
SpreadJS是純前端的電子表格控件,可以輕鬆加載 Excel 工作簿中的數據並將它們呈現在前端瀏覽器應用的網頁上。 在某些情況下,您可能需要將來自多個工作簿的數據(例如,來自不同部門的月度銷售報告)合併到一個工作簿中,實現此目的的一種方法是使用多個隱藏的 SpreadJS 實例來加載所有工作簿,然後將它們合併到一個電子表格中。 此文將向您展示如何合併多個 Excel 工作簿並將它們作爲單個電子表格顯示在您的前端瀏覽器應用中。
設置項目
要加載 SpreadJS,我們需要添加主要的 JavaScript 庫和 CSS 文件。由於還要加載 Excel 文件,因此我們需要添加 ExcelIO JavaScript 庫。這可以通過導航到 HTML 文件的位置並使用 NPM 安裝 SpreadJS 文件來完成:
npm i @grapecity/spread-sheets @grapecity/spread-excelio
然後在 HTML 代碼中引用這些文件:
\<!DOCTYPE html\>
\<html xmlns="http://www.w3.org/1999/xhtml"\>
\<head\>
\<meta charset="utf-8" /\>
\<title\>Multiple Sheet Merging\</title\>
\<link href="./node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css" rel="stylesheet" type="text/css" /\>
\<script type="text/javascript" src="./node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js"\>\</script\>
\<script type="text/javascript" src="./node_modules/@grapecity/spread-excelio/dist/gc.spread.excelio.min.js"\>\</script\>
\</head\>
\</html\>
緊接着我們將添加一個 DIV 元素來承載 SpreadJS 實例。
\<body\>
\<div id="ss" style="width: 800px; height: 700px; border: 1px solid gray"\>\</div\>
\</body\>
我們要添加一些代碼來初始化 Spread 實例、ExcelIO 和一個數組來保存隱藏的 Spread 實例,我們將在合併之前使用它來加載所有 Excel 文件:
var hiddenWorkbooks, hiddenSpreadIndex, excelIO, spread;
window.onload = function () {
hiddenSpreadIndex = -1;
hiddenWorkbooks = new Array();
excelIO = new GC.Spread.Excel.IO();
spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
}
在前端應用中加載 Excel 文件
對於這個頁面,我們將添加代碼讓用戶加載任意數量的工作簿,然後單擊一個按鈕將它們合併爲一個並在 SpreadJS 中顯示它們。爲此,我們可以添加以下 HTML 代碼:
\<input type="file" name="files[]" id="fileDemo" accept=".xlsx,.xls" /\>
\<input type="button" id="addWorkbook" value="Add Workbook" onclick="CreateNewSpreadDiv()" /\>
\<div id="workbookListBlock" style="display:none"\>
\<p\>Workbooks to merge:\</p\>
\<ul id="workbookList"\>\</ul\>
\<input type="button" id="mergeWorkbooks" value="Merge Workbooks" onclick="MergeWorkbooks()" /\>
\</div\>
用戶點擊文件輸入選擇一個文件,然後點擊“添加工作簿”按鈕。這將創建一個新的隱藏 DIV 元素來保存將用於臨時加載 Excel 文件的 SpreadJS 實例,並將它們添加到隱藏工作簿列表中:
function CreateNewSpreadDiv() {
hiddenSpreadIndex++;
var newDiv = document.createElement("div");
newDiv.style.cssText = "display:none; width: 800px; height: 600px; border: 1px solid gray";
newDiv.id = "hiddenWorkbook" + hiddenSpreadIndex;
document.body.appendChild(newDiv);
var hiddenWorkbook = new GC.Spread.Sheets.Workbook(document.getElementById(newDiv.id));
hiddenWorkbooks.push(hiddenWorkbook);
AddWorkbookToImportList();
}
然後,該函數使用 ExcelIO 代碼調用另一個函數將 Excel 文件加載到隱藏的 Spread 實例中:
function AddWorkbookToImportList() {
var excelFile = document.getElementById("fileDemo").files[0];
excelIO.open(excelFile, function (json) {
var workbookObj = json;
hiddenWorkbooks[hiddenSpreadIndex].fromJSON(workbookObj);
AddWorkbookNameElement(document.getElementById("fileDemo").files[0].name);
document.getElementById("fileDemo").value = "";
}, function (e) {
console.log(e);
});
}
爲了向用戶提供反饋,我們將顯示他們將要合併的文件列表,此處顯示爲“AddWorkbookNameElement”函數:
function AddWorkbookNameElement(workbookName) {
if (document.getElementById("workbookListBlock").style.display == "none") {
document.getElementById("workbookListBlock").style.display = "block";
}
var newDiv = document.createElement("LI");
var textNode = document.createTextNode(workbookName);
newDiv.appendChild(textNode);
document.getElementById("workbookList").appendChild(newDiv);
}
在前端應用中合併 Excel 文件
當用戶準備好最終將所有工作簿合併爲一個時,他們可以單擊“合併工作簿”按鈕,將每個工作簿中的每個工作表複製到頁面上可見的 SpreadJS 實例:
function MergeWorkbooks() {
for (var w = 0; w \< hiddenWorkbooks.length; w++) {
if (GC.Spread.Sheets.LicenseKey == null) {
for (var s = 1; s \< hiddenWorkbooks[w].getSheetCount(); s++) {
CopySheet(w, s);
}
} else {
for (var s = 0; s \< hiddenWorkbooks[w].getSheetCount(); s++) {
CopySheet(w, s);
}
}
}
spread.removeSheet(0);
}
function CopySheet(workbookIndex, sheetIndex) {
spread.addSheet();
var sheetJson = JSON.stringify(hiddenWorkbooks[workbookIndex].getSheet(sheetIndex).toJSON());
spread.suspendPaint();
hiddenWorkbooks[workbookIndex].getNamedStyles().forEach(function (namedStyle) {
spread.addNamedStyle(namedStyle);
});
spread.getSheet(spread.getSheetCount()-1).fromJSON(JSON.parse(sheetJson));
spread.resumePaint();
}
需要注意的一件事:如果您的工作簿正在使用命名樣式,則需要將此樣式添加到可見的 SpreadJS實例中,否則它將無法正確顯示,因爲我們正在複製單個工作表。這顯示在上面的函數中,可以添加到“spread.addNamedStyle()”。
添加該代碼後,您現在可以加載多個 Excel 工作簿並使用 SpreadJS 將它們合併爲一個。想要嘗試該功能或查看 SpreadJS 的其他驚人功能,可前往葡萄城官網立即下載試用版!
>>>>>>擴展閱讀: