[]
        
(Showing Draft Content)

Import and Export Excel Files on 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, 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:

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

<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>
<!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>