本文由葡萄城技術團隊於部落格園原創並首發。葡萄城為開發者提供專業的開發工具、解決方案和服務，賦能開發者。

前言|問題背景

　　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 檔案

在 JavaScript 中合併 Excel XLSX 檔案

當用戶準備好最終將所有工作簿合併為一個時，他們可以單擊「合併工作簿」按鈕，將每個工作簿中的每個工作表複製到頁面上可見的 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 的其他驚人功能，可前往葡萄城官網立即下載試用版！

如何在前端應用中合併多個 Excel 工作簿

前言|問題背景

設定專案

在前端應用中載入 Excel 檔案

在前端應用中合併 Excel 檔案