Saving and Rendering

TableSheet supports JSON serialization, printing, exporting Excel files, and saving as PDF files.

JSON serialization and deserialization TableSheet JSON serialization and deserialization is done using the workbook's toJSON and fromJSON methods. It is recommended to use setDataView after fromJSON. Export Excel Exporting TableSheet to Excel is done using the GC.Spread.Excel.IO save method. It is recommended to set includeBindingSource to true when exporting to Excel. It is an option to set saveAsView to true when exporting to Excel. Export PDF Exporting TableSheet to PDF is done using the workbook's savePDF method.  For printing or exporting to PDF, a user can customize the print information using the printInfo method. Print TableSheet printing is done using the workbook's print method.
/*REPLACE_MARKER*/ /*DO NOT DELETE THESE COMMENTS*/ window.onload = function() { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 0 }); initSpread(spread); initEvent(spread); }; function initSpread(spread) { spread.suspendPaint(); spread.options.autoFitType = GC.Spread.Sheets.AutoFitType.cellWithHeader; //init a data manager var baseApiUrl = getBaseApiUrl(); var dataManager = spread.dataManager(); //add product table var productTable = dataManager.addTable("productTable", { remote: { read: { url: baseApiUrl + "/Product" } } }); //init a table sheet var sheet = spread.addSheetTab(0, "TableSheet1", GC.Spread.Sheets.SheetType.tableSheet); sheet.options.allowAddNew = false; //hide new row sheet.actionColumn.options({ visible: false }); //hide action column sheet.setDefaultRowHeight(40, GC.Spread.Sheets.SheetArea.colHeader); //bind a view to the table sheet var myView = productTable.addView("myView", [ { value: "Id", caption: "ID" }, { value: "ProductName", caption: "Name", width: 400 }, { value: "UnitPrice", caption: "Unit Price", width: 100 }, { value: "UnitsInStock", caption: "Units In Stock", width: 100 }, { value: "UnitsOnOrder", caption: "Units On Order", width: 100 } ]); myView.fetch().then(function() { sheet.setDataView(myView); sheet.togglePinnedRows([1, 3, 6]); sheet.togglePinnedColumns([1]); }); spread.resumePaint(); } function initEvent(spread) { document.getElementById('toJSON').onclick = function() { var json = spread.toJSON({ includeBindingSource: true, saveAsView: true }); saveAs(new Blob([JSON.stringify(json)], { type: "text/plain;charset=utf-8" }), 'download.ssjson'); }; document.getElementById('fromJSON').onclick = function() { var file = document.getElementById("fileDemo").files[0]; if (file) { var reader = new FileReader(); reader.onload = function() { var json = JSON.parse(this.result); spread.fromJSON(json); }; reader.readAsText(file); } }; document.getElementById('saveExcel').onclick = function() { var excelIo = new GC.Spread.Excel.IO(); var json = spread.toJSON({ includeBindingSource: true, saveAsView: true }); excelIo.save(json, function(blob) { saveAs(blob, "export.xlsx"); }, function(e) { console.log(e); }); }; document.getElementById('exportPDF').onclick = function() { spread.savePDF(function(blob) { saveAs(blob, "export.pdf"); }, function(error) { console.log(error); }, null, spread.getSheetCount() + spread.getActiveSheetTabIndex()); }; document.getElementById('print').onclick = function() { spread.print(); }; } function getBaseApiUrl() { return window.location.href.match(/http.+spreadjs\/demos\//)[0] + 'server/api'; }
<!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"> <!-- Promise Polyfill for IE, https://www.npmjs.com/package/promise-polyfill --> <script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"></script> <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-sheets-print/dist/gc.spread.sheets.print.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/en/purejs/node_modules/@grapecity/spread-sheets-pdf/dist/gc.spread.sheets.pdf.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/en/purejs/node_modules/@grapecity/spread-sheets-tablesheet/dist/gc.spread.sheets.tablesheet.min.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$/spread/source/js/license.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"> <fieldset> <legend>Save</legend> <div class="field-line"> <input type="button" id="toJSON" value="JSON" class="button"> </div> <div class="field-line"> <input type="button" id="saveExcel" value="Excel" class="button"> </div> </fieldset> <fieldset> <legend>Load</legend> <div class="field-line"> <input type="file" id="fileDemo" class="input"> </div> <div class="field-line"> <input type="button" id="fromJSON" value="JSON" class="button"> </div> </fieldset> <fieldset> <legend>Render</legend> <div class="field-line"> <input type="button" id="exportPDF" value="PDF" class="button"> </div> <div class="field-line"> <input type="button" id="print" value="PRINT" class="button"> </div> </fieldset> </div> </div> </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; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } fieldset { padding: 6px; margin: 0; margin-top: 10px; } fieldset span, fieldset input, fieldset select { display: inline-block; text-align: left; } fieldset input[type=text] { width: calc(100% - 58px); } fieldset input[type=button] { width: 100%; text-align: center; } fieldset input[type=file] { width: 100%; text-align: left; } fieldset select { width: calc(100% - 50px); } .field-line { margin-top: 4px; } .field-inline { display: inline-block; vertical-align: middle; } fieldset label.field-inline { width: 100px; } fieldset input.field-inline { width: calc(100% - 100px - 12px); }