Spread.Sheets Documentation
Importing and Exporting Excel Files on the Client-Side
Spread.Sheets Documentation > Developer's Guide > Managing Data > Importing and Exporting Excel Files on the Client-Side

You can import an Excel file (.xlsx) to JSON and export a JSON object to Excel with the import and export methods on the client-side.

The exported Excel file is locked since the file is from the Internet. The Excel export occurs client-side, not from the server. Downloading on the client-side causes the file to be locked. When you first open the excel file, warning text is displayed.

<!DOCTYPE html> is required to view the widget properly.

You can download the Excel file locally or get the returned Excel file (type: blob) to post it to a server.

The following methods are available with the Excel import and export:

The following table lists the features that are imported or exported from or to an Excel file.

Category Description Import (excel to json) Export (json to excel)

workbook

(spread)

tabstrip:

tabStripVisible, startSheetIndex, tabStripRatio, tabColor

 √ √
 

scrollbar:

showHorizontalScrollbar, showVerticalScrollbar

 √ √
 

sheets:

sheet visible, sheet name

 √ √
  Reference style: R1C1 or A1 √ √
  custom name √ √
sharedStrings the string used for sheet data (common string, string with white spaces) √ √
theme color scheme √ √
  font scheme (Spread.Sheets has no detailed fonts) √ √
  format scheme (Spread.Sheets has no format schemes) X √
style cellStyles: all Spread.Sheets supported styles √ √
  different formats (formats used in tables, conditional formats, and filters) √ √
  tableStyles √ √
worksheet rowRangeGroup, colRangeGroup √ √
  rowCount and columnCount √ √
  gridline visible, gridline color √ √
  row header and column header visible √ √
  zoom √ √
  selections √ √
  activeRow, activeColumn √ √
  freeze (frozenRowCount, frozenColumnCount) √ √
  default rowHeight, default columnWidth √ √
  columnInfo: column width, column visible, column style √ √
  merged cells (span) √ √
  protected sheet √ √
  rowInfo: row height, row visible, row style √ √
  cellInfo: cell value, cell formula, cell style √ √
  custom name √ √
  conditional format √ √
  comment √ √
  picture √ √
  slicer √ √
  sparkline √ √
  table √ √
  filter √ √
  validation √ √
  outline √ √
  print √ √

Using Code

This example opens and saves an Excel file. The first section of code lists the dependencies for the client-side import and export.

JavaScript
Copy Code 
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2014-11-29/FileSaver.min.js"></script>
    <link href="./css/gc.spread.sheets.excel2013white.x.xx.xxxx.x.css" rel="stylesheet"/>
    <script src="./scripts/gc.spread.sheets.all.x.xx.xxxx.x.min.js" type="application/javascript"></script>
    <!--For client-side excel i/o-->
    <script src="./scripts/interop/gc.spread.excelio.x.xx.xxxxx.x.min.js"></script>
JavaScript
Copy Code

<!DOCTYPE html>
<html lang="en">
<head>
    <title>SpreadJS V10 Client Side ExcelIO</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2014-11-29/FileSaver.min.js"></script>
    <link href="./css/gc.spread.sheets.excel2013white.10.x.x.css" rel="stylesheet"/>
    <script src="./scripts/gc.spread.sheets.all.10.x.x.min.js" type="application/javascript"></script>
    <!--For client-side excel i/o-->
    <script src="./scripts/interop/gc.spread.excelio.10.x.x.min.js"></script>
</head>
<body>
<div>
    <input type="file" name="files[]" id="fileDemo" accept=".xlsx,.xls"/>
    <input type="button" id="loadExcel" value="Import" onclick="ImportFile()"/>   
    <input type="button" class="btn btn-default" id="saveExcel" value="Export" onclick="ExportFile()"/>
<input type="text" id="exportFileName" placeholder="Export file name" class="form-control" value="export.xlsx"/>
    <div id="ss" style="width:100%;height:500px"></div>
</div>
</div>
</body>
<script>

    var workbook, excelIO;
window.onload = function () {
workbook = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
excelIO = new GC.Spread.Excel.IO();
    }

    function ImportFile() {
        var excelFile = document.getElementById("fileDemo").files[0];
        excelIO.open(excelFile, function (json) {
            var workbookObj = json;
           workbook.fromJSON(workbookObj);
        }, function (e) {
            console.log(e);
        });
    }

    function ExportFile() {
        var fileName = document.getElementById("exportFileName").value;
        if (fileName.substr(-5, 5) !== '.xlsx') {
            fileName += '.xlsx';
        }
        var json = JSON.stringify(workbook.toJSON());
        excelIO.save(json, function (blob) {
            saveAs(blob, fileName);
        }, function (e) {
            console.log(e);
        });
    }
</script>
</html>

 

 

Copyright © GrapeCity, inc. All rights reserved.

Send comments on this topic.