SpreadJS 13
SpreadJS Documentation / Developer's Guide / Features / Manage Data / Import and Export Excel Files on the Client-Side
In This Topic
    Import and Export Excel Files on the Client-Side
    In This Topic

    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.13.0.0.css" rel="stylesheet"/>
        <script src="./scripts/gc.spread.sheets.all.13.0.0.min.js" type="application/javascript"></script>
        <!--For client-side excel i/o-->
        <script src="./scripts/interop/gc.spread.excelio.13.0.0.min.js"></script>
    </head>
    <body>
    <div>
        <input type="file" name="files[]" id="fileDemo" accept=".xlsx"/>
        <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>