Excel IO

SpreadJS provides the most complete support for importing and exporting your complex Excel files. Load your most complex Excel files, make changes, and export back to an Excel file or save the data to a database. In-browser Excel Import and Export imports Excel files (.xlsx) into Spread json and exports Spread json to Excel. The Spread JSON makes loading and saving Spread instances easy.

In order to use the ExcelIO feature, you need to add the related js file link into the document's head section below the Spread link. For example: Initialize the workbook and excel IO instance. Then you can use client-side ExcelIO to import excel files(.xlsx) to Spread json or export Spread json to an excel file. You can use the open method of the ExcelIO component to import or use the save method of ExcelIO component to export For example: You can also use Password to open or save a protected Excel file. You just need to pass an options{password:xxxx} to the open and save methods. For example: Set the calcOnDemand property to true to delay calculations on demand and improve import performance. ExcelIO export/import saves the current sheet view position in the exported workbook. It saves the top-left cell of the worksheet as a scroll reference. For example, if the top left cell was A22 when the workbook was saved, the sheet will automatically be scrolled to have that cell at the top left when opened again.
window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {calcOnDemand: true}); spread.fromJSON(jsonData); var excelIo = new GC.Spread.Excel.IO(); document.getElementById('loadExcel').onclick = function () { var excelFile = document.getElementById("fileDemo").files[0]; var password = document.getElementById('password').value; var incrementalEle = document.getElementById("incremental"); var loadingStatus = document.getElementById("loadingStatus"); incrementalEle.addEventListener('change', function (e) { document.getElementById('loading-container').style.display = incrementalEle.checked ? "block" : "none"; }); // here is excel IO API excelIo.open(excelFile, function (json) { var workbookObj = json; if (incrementalEle.checked) { spread.fromJSON(workbookObj, { incrementalLoading: { loading: function (progress, args) { progress = progress * 100; loadingStatus.value = progress; console.log("current loading sheet", args.sheet && args.sheet.name()); }, loaded: function () { } } }); } else { spread.fromJSON(workbookObj); } }, function (e) { // process error alert(e.errorMessage); if (e.errorCode === 2/*noPassword*/ || e.errorCode === 3 /*invalidPassword*/) { document.getElementById('password').onselect = null; } }, {password: password}); }; document.getElementById('saveExcel').onclick = function () { var fileName = document.getElementById('exportFileName').value; var password = document.getElementById('password').value; if (fileName.substr(-5, 5) !== '.xlsx') { fileName += '.xlsx'; } var json = spread.toJSON(); // here is excel IO API excelIo.save(json, function (blob) { saveAs(blob, fileName); }, function (e) { // process error console.log(e); }, {password: password}); }; };
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/en/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/FileSaver.js" type="text/javascript"></script> <script src="$DEMOROOT$/en/purejs/node_modules/@grapecity/spread-excelio/dist/gc.spread.excelio.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/en/purejs/node_modules/@grapecity/spread-sheets-charts/dist/gc.spread.sheets.charts.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/data/excel_data.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="sample-tutorial"> <div id="ss" class="sample-spreadsheets"></div> <div class="options-container"> <div class="option-row"> <div class="inputContainer"> <input type="checkbox" id="incremental" checked/> <label for="incremental">Incremental Loading</label> <p class="summary" id="loading-container"> Loading progress: <input style="width: 231px;" id="loadingStatus" type="range" name="points" min="0" max="100" value="0" step="0.01"/> </p> <input type="file" id="fileDemo" class="input"> <br> <input type="button" id="loadExcel" value="import" class="button"> </div> <div class="inputContainer"> <input id="exportFileName" value="export.xlsx" class="input"> <input type="button" id="saveExcel" value="export" class="button"> </div> </div> <div class="option-row"> <div class="group"> <label>Password: <input type="password" id="password"> </label> </div> </div> </div> </div></body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } .sample-spreadsheets { width: calc(100% - 280px); height: 100%; overflow: hidden; float: left; } .options-container { float: right; width: 280px; padding: 12px; height: 100%; box-sizing: border-box; background: #fbfbfb; overflow: auto; } .sample-options { z-index: 1000; } .inputContainer { width: 100%; height: auto; border: 1px solid #eee; padding: 6px 12px; margin-bottom: 10px; box-sizing: border-box; } .input { font-size: 14px; height: 20px; border: 0; outline: none; background: transparent; } .button { height: 30px; padding: 6px 12px; width: 80px; margin-top: 6px; } .group { padding: 12px; } .group input { padding: 4px 12px; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }