# Import and Export Excel Files on Client-Side

## Content

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, users need to reference the `gc.spread.excelio.*.*.*.min.js` file to import and export excel files.
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:

* [open](https://developer.mescius.com/spreadjs/api/excelio/classes/Excel.IO-1#open)
* [save](https://developer.mescius.com/spreadjs/api/excelio/classes/Excel.IO-1#save)

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 | √ | √ |
|  | showZeros | √ | √ |
|  | 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 the code lists the dependencies for the client-side import and export.

```HTML
<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>
```

```HTML
<!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.x.x.x.css" rel="stylesheet"/>
    <script src="./scripts/gc.spread.sheets.all.x.x.x.min.js" type="application/javascript"></script>
    <!--For client-side excel i/o-->
    <script src="./scripts/interop/gc.spread.excelio.x.x.x.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>
```