SpreadJS Documentation
Importing and Exporting Excel Files on the Client-Side
SpreadJS 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. Also, in order to import and export excel files, users need to reference the file: gc.spread.excelio.*.*.*.min.js

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 (SpreadJS has no detailed fonts)
  format scheme (SpreadJS has no format schemes) X
style cellStyles: all SpreadJS 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 V11 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.12.0.0.css" rel="stylesheet"/>
    <script src="./scripts/gc.spread.sheets.all.12.0.0.min.js" type="application/javascript"></script>
    <!--For client-side excel i/o-->
    <script src="./scripts/interop/gc.spread.excelio.12.0.0.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>