Excel IO

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, especially since the formatting is close to standard JSON formatting.

<p>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:</p> <pre><code class="hljs"><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span> ... <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">'.../spreadjs/gc.spread.sheets.all.x.x.x.min.js'</span> <span class="hljs-attr">type</span>=<span class="hljs-string">'text/javascript'</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">'.../spreadjs/plugins/gc.spread.excelio.x.x.x.min.js'</span> <span class="hljs-attr">type</span>=<span class="hljs-string">'text/javascript'</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span> </code></pre> <p>Initialize the workbook and excel IO instance.</p> <pre><code class="hljs js language-js"> <span class="hljs-keyword">var</span> spread = <span class="hljs-keyword">new</span> GC.Spread.Sheets.Workbook(<span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'ss'</span>)); <span class="hljs-keyword">var</span> excelIo = <span class="hljs-keyword">new</span> GC.Spread.Excel.IO(); </code></pre> <p>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 <strong>open</strong> method of the ExcelIO component to import or use the <strong>save</strong> method of ExcelIO component to export</p> <p>For example:</p> <pre><code class="hljs js language-js"> <span class="hljs-comment">//import excel file to SpreadJS json</span> excelIo.open(excelFile, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">json</span>) </span>{ <span class="hljs-keyword">var</span> workbookObj = json; workbook.fromJSON(workbookObj); }, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">e</span>) </span>{ <span class="hljs-comment">// process error</span> <span class="hljs-built_in">console</span>.log(e); }); <span class="hljs-comment">//export SpreadJS json to excel file</span> excelio.save(json, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">blob</span>) </span>{ <span class="hljs-comment">//do whatever you want with blob</span> <span class="hljs-comment">//such as you can save it</span> }, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">e</span>) </span>{ <span class="hljs-comment">//process error</span> <span class="hljs-built_in">console</span>.log(e); }); </code></pre> <p>You can also use <strong>Password</strong> to open or save a protected Excel file. You just need to pass an <strong>options{password:xxxx}</strong> to the <strong>open and save</strong> methods. For example:</p> <pre><code class="hljs js language-js"> <span class="hljs-comment">//import excel file to SpreadJS json</span> excelIo.open(excelFile, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">json</span>) </span>{ <span class="hljs-keyword">var</span> workbookObj = json; workbook.fromJSON(workbookObj); }, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">e</span>) </span>{ <span class="hljs-comment">// process error</span> <span class="hljs-built_in">console</span>.log(e); },{<span class="hljs-attr">password</span>:xxxx}); <span class="hljs-comment">//export SpreadJS json to excel file</span> excelio.save(json, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">blob</span>) </span>{ <span class="hljs-comment">//do whatever you want with blob</span> <span class="hljs-comment">//such as you can save it</span> }, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">e</span>) </span>{ <span class="hljs-comment">//process error</span> <span class="hljs-built_in">console</span>.log(e); },{<span class="hljs-attr">password</span>:xxxx}); </code></pre> <p>Set the <strong>calcOnDemand</strong> property to true to delay calculations on demand and improve import performance.</p> <pre><code class="hljs js language-js"> <span class="hljs-keyword">var</span> spread = <span class="hljs-keyword">new</span> GC.Spread.Sheets.Workbook(<span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'ss'</span>), {<span class="hljs-attr">calcOnDemand</span>: <span class="hljs-literal">true</span>}); <span class="hljs-keyword">var</span> excelIo = <span class="hljs-keyword">new</span> GC.Spread.Excel.IO(); </code></pre> <p>ExcelIO export/import <strong>saves the current sheet view position</strong> 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.</p>
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(); var sheet = spread.getActiveSheet(); document.getElementById('loadExcel').onclick = function () { var excelFile = document.getElementById("fileDemo").files[0]; var password = document.getElementById('password').value; // here is excel IO API excelIo.open(excelFile, function (json) { var workbookObj = json; 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="file" id="fileDemo" class="input"> <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; }