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