This article was originally created and published by the technical team of Grape City in the blog garden. Please indicate the source of the reprint: Grape City official website , Grape City provides developers with professional development tools, solutions and services to empower developers.
Preface | Problem Background
SpreadJS is a pure front-end spreadsheet control that can easily load data in Excel workbooks and present them on the web pages of front-end browser applications.
In some cases, you may need to combine data from multiple workbooks (for example, monthly sales reports from different departments) into one workbook, one way to do this is to use multiple hidden instances of SpreadJS to load all the workbooks and combine them into one spreadsheet.
This article will show you how to combine multiple Excel workbooks and display them as a single spreadsheet in your front-end browser application.
set item
To load SpreadJS, we need to add the main JavaScript library and CSS files. Since we're also loading Excel files, we need to add the ExcelIO JavaScript library. This can be done by navigating to the location of the HTML file and installing the SpreadJS file using NPM:
npm i @grapecity/spread-sheets @grapecity/spread-excelio
Then reference these files in HTML code:
\<!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\>
Next we'll add a DIV element to hold the SpreadJS instance.
\<body\>
\<div id="ss" style="width: 800px; height: 700px; border: 1px solid gray"\>\</div\>
\</body\>
We're going to add some code to initialize the Spread instance, ExcelIO, and an array to hold the hidden Spread instances, which we'll use to load all the Excel files before merging:
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"));
}
Load Excel files in the front-end application
For this page, we'll add code to let the user load any number of workbooks, then click a button to merge them into one and display them in SpreadJS. To do this, we can add the following HTML code:
\<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\>
The user clicks on the file input to select a file and clicks the "Add Workbook" button. This will create a new hidden DIV element to hold the SpreadJS instances that will be used to temporarily load the Excel files and add them to the list of hidden workbooks:
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();
}
The function then uses the ExcelIO code to call another function to load the Excel file into the hidden Spread instance:
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);
});
}
To provide feedback to the user, we will display the list of files they will merge, shown here as the "AddWorkbookNameElement" function:
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);
}
Merge Excel files in front-end application
[External link picture transfer failed, the source site may have an anti-theft link mechanism, it is recommended to save the picture and upload it directly (img-0U6AlMpb-1685089090317)(media/4946fef31b3121def89b28d676508f6d.png)]
When the user is ready to finally merge all the workbooks into one, they can click the "Merge Workbooks" button to copy every worksheet in each workbook to the SpreadJS instance visible on the page:
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();
}
One thing to note: If your workbook is using a named style, you need to add this style to the visible SpreadJS instance, otherwise it won't display correctly because we are duplicating a single sheet. This is shown in the function above and can be added to "spread.addNamedStyle()".
With that code added, you can now load multiple Excel workbooks and use SpreadJS to combine them into one. If you want to try this feature or see other amazing features of SpreadJS, you can go to the official website of Grape City and download the trial version now!
>>>>>>Extended reading:
Inventory those interesting "bugs" in Excel
SpreadJS: An Excel-like development tool with functions covering more than 95% of Excel