Spread.Sheets can easily load Excel workbooks and render them on webpages. In some cases, these workbooks may need to be combined, like monthly reports. As with my other blog about loading specific sheets, we can also utilize hidden workbooks to load all the workbooks first before combining them into one.

Download the sample (zip)

Set Up the Project

To load Spread.Sheets, we will need to add the main JS library and CSS files. Since we are also loading Excel files, we need to add the Client-Side ExcelIO JS library:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <meta charset="utf-8" />
    <title>SJS Multiple Sheet Merging</title>

    <link href="http://cdn.grapecity.com/spreadjs/hosted/css/gc.spread.sheets.excel2013white.11.0.1.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://cdn.grapecity.com/spreadjs/hosted/scripts/gc.spread.sheets.all.11.0.1.min.js"></script>
    <script type="text/javascript" src="http://cdn.grapecity.com/spreadjs/hosted/scripts/interop/gc.spread.excelio.11.0.1.min.js"></script>


If you're deploying your page, you'll also need to add your license key:

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

Then we'll add a DIV element to host the Spread.Sheets instance.

    <div id="ss" style="width: 800px; height: 700px; border: 1px solid gray"></div>

We'll want to add some code to initialize that Spread instance, the Client-Side ExcelIO, and an array to hold the hidden Spread instances we'll use to load all of the Excel files before combining:

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

For this page, we'll add code to let the user load as many workbooks as they want, and click a button to combine them into one and display in Spread.Sheets. 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 load:</p>
    <ul id="workbookList"></ul>
    <input type="button" id="loadWorkbooks" value="Load Workbooks" onclick="LoadWorkbooks()" />

The user clicks on the file input to select a file, and then clicks the “Add Workbook” button. This creates a new hidden DIV element to hold the Spread that will be used to temporarily load the Excel file, and add them to the list of hidden workbooks:

function CreateNewSpreadDiv() {
    var newDiv = document.createElement("div");
    newDiv.style.cssText = "display:none; width: 800px; height: 600px; border: 1px solid gray";
    newDiv.id = "hiddenWorkbook" + hiddenSpreadIndex;
    var hiddenWorkbook = new GC.Spread.Sheets.Workbook(document.getElementById(newDiv.id));

That function then calls another function to load the Excel file into that hidden Spread instance, using Client-Side ExcelIO code:

function AddWorkbookToImportList() {
    var excelFile = document.getElementById("fileDemo").files[0];
    excelIO.open(excelFile, function (json) {
        var workbookObj = json;

        document.getElementById("fileDemo").value = "";

    }, function (e) {

To give the user feedback, we'll show a list of the files that they're going to be combining, 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);

When the user is ready to finally combine all the workbooks into one, they can click on the “Load Workbooks” button, which copies each sheet from each workbook to the visible Spread instance on the page:

function LoadWorkbooks() {
    for (var w = 0; w < hiddenWorkbooks.length; w++) {
        for (var s = 1; s < hiddenWorkbooks[w].getSheetCount(); s++) {
            CopySheet(w, s);

function CopySheet(workbookIndex, sheetIndex) {
    var sheetJson = JSON.stringify(hiddenWorkbooks[workbookIndex].getSheet(sheetIndex).toJSON());
    hiddenWorkbooks[workbookIndex].getNamedStyles().forEach(function (namedStyle) {

One thing to note: the styling of each workbook needs to be added to the visible Spread instance, or it won’t display correctly, shown in the above function as the call to “spread.addNamedStyle()”.

After that code is added, you can now load multiple Excel workbooks and combine them into one with Spread.Sheets.

Download your free 30-day trial of Spread JS