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

本文由葡萄城技術團隊於博客園原創並首發。轉載請註明出處:葡萄城官網,葡萄城爲開發者提供專業的開發工具、解決方案和服務,賦能開發者。

前言|問題背景

​ 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中的那些有趣的“bug”

SpreadJS:一款類Excel開發工具,功能涵蓋Excel的 95% 以上

SpreadJS在服務器端導入導出Excel

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章