使用导入导出Excel, 你需要将相关的js文件添加的document的head区域。例如:
初始化Workbook实例和ExcelIO实例。
接下来你就可以使用open方法将excel文件导入为spread json，使用 save 方法将spread json导出为excel文件。
例如:
同时，你还打开或保存一个带有密码保护的excel文件，只需要在open和save方法中传入参数options{password:xxxx}即可。例如:
为了提高文件导入的速度，你可以使用calcOnDemand属性来指定是否仅在需要时才计算公式。例如:
ExcelIO导出时保存工作表的滚动位置。下次打开工作簿时，会自动滚动到上次的位置。
这实际上记录了工作表的左上方单元格。例如，如果保存工作簿时左上角的单元格是A22，则再次打开工作表时，该表将自动滚动以使该单元格位于左上角。
这在用户编辑大型工作簿时尤其有用。当重新打开工作簿后，他们不必一直滚动回到他们上次编辑的位置，而是可以从停下来的地方继续工作。
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {calcOnDemand: true});
spread.fromJSON(jsonData);
var excelIo = new GC.Spread.Excel.IO();
document.getElementById('loadExcel').onclick = function () {
var excelFile = document.getElementById("fileDemo").files[0];
var password = document.getElementById('password').value;
var incrementalEle = document.getElementById("incremental");
var loadingStatus = document.getElementById("loadingStatus");
incrementalEle.addEventListener('change', function (e) {
document.getElementById('loading-container').style.display = incrementalEle.checked ? "block" : "none";
});
// here is excel IO API
excelIo.open(excelFile, function (json) {
var workbookObj = json;
if (incrementalEle.checked) {
spread.fromJSON(workbookObj, {
incrementalLoading: {
loading: function (progress) {
progress = progress * 100;
loadingStatus.value = progress;
},
loaded: function () {
}
}
});
} else {
spread.fromJSON(workbookObj);
}
}, function (e) {
// process error
alert(e.errorMessage);
if (e.errorCode === 2/*noPassword*/ || e.errorCode === 3 /*invalidPassword*/) {
document.getElementById('password').onselect = null;
}
}, {password: password});
};
document.getElementById('saveExcel').onclick = function () {
var fileName = document.getElementById('exportFileName').value;
var password = document.getElementById('password').value;
if (fileName.substr(-5, 5) !== '.xlsx') {
fileName += '.xlsx';
}
var json = spread.toJSON();
// here is excel IO API
excelIo.save(json, function (blob) {
saveAs(blob, fileName);
}, function (e) {
// process error
console.log(e);
}, {password: password});
};
};
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta name="spreadjs culture" content="zh-cn" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/zh/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/FileSaver.js" type="text/javascript"></script>
<script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity/spread-excelio/dist/gc.spread.excelio.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity/spread-sheets-charts/dist/gc.spread.sheets.charts.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/data/excel_data.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="sample-tutorial">
<div id="ss" class="sample-spreadsheets"></div>
<div class="options-container">
<div class="option-row">
<div class="inputContainer">
<input type="checkbox" id="incremental" checked/>
<label for="incremental">Incremental Loading</label>
<p class="summary" id="loading-container">
Loading progress:
<input style="width: 231px;" id="loadingStatus" type="range" name="points" min="0" max="100" value="0" step="0.01"/>
</p>
<input type="file" id="fileDemo" class="input">
<input type="button" id="loadExcel" value="import" class="button">
</div>
<div class="inputContainer">
<input id="exportFileName" value="export.xlsx" class="input">
<input type="button" id="saveExcel" value="export" class="button">
</div>
</div>
<div class="option-row">
<div class="group">
<label>Password:
<input type="password" id="password">
</label>
</div>
</div>
</div>
</div></body>
</html>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: calc(100% - 280px);
height: 100%;
overflow: hidden;
float: left;
}
.options-container {
float: right;
width: 280px;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
overflow: auto;
}
.sample-options {
z-index: 1000;
}
.inputContainer {
width: 100%;
height: auto;
border: 1px solid #eee;
padding: 6px 12px;
margin-bottom: 10px;
box-sizing: border-box;
}
.input {
font-size: 14px;
height: 20px;
border: 0;
outline: none;
background: transparent;
}
.button {
height: 30px;
padding: 6px 12px;
width: 80px;
margin-top: 6px;
}
.group {
padding: 12px;
}
.group input {
padding: 4px 12px;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
USA - International
Japan
South
Korea