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