继上一篇博客落下的导入导出
页面布局:
<div class="options-container">
<div class="option-row">
<div class="inputContainer">
<input type="file" id="fileDemo" class="input" @change="changeFileDemo" />
<input type="button" id="loadExcel" value="import" class="button" @click="loadExcel" />
</div>
<div class="inputContainer">
<input id="exportFileName" value="export.xlsx" class="input" @change="changeExportFileName" />
<input type="button" id="saveExcel" value="export" class="button" @click="saveExcel" />
</div>
</div>
</div>
导入功能:
loadExcel () {
let spread = this.spread
let excelIo = new IO()
let excelFile = this.importExcelFile
excelIo.open(
excelFile,
function (json) {
spread.fromJSON(json)
},
function (error) {
// process error
alert(error.errorMessage)
}
)
},
changeFileDemo (e) {
this.importExcelFile = e.target.files[0]
},
changeExportFileName (e) {
this.exportFileName = e.target.value
},
导出功能:
saveExcel () {
let spread = this.spread
let excelIo = new IO()
let fileName = this.exportFileName || 'export'
if (fileName.substr(-5, 5) !== '.xlsx') {
fileName += '.xlsx'
}
//这一部分如果不加导入的只是excel写死的哪部分,动态绑定的部分导出来是没数据的
var serializationOption = {
includeBindingSource: true, // include binding source when converting the workbook to json, default value is false
ignoreStyle: false, // ignore styles when converting workbook to json, default value is false
ignoreFormula: false, // ignore formulas when converting workbook to json, default value is false
saveAsView: true, // include the format string formatting result when converting workbook to json, default value is false
rowHeadersAsFrozenColumns: false, // treat row headers as frozen columns when converting workbook to json, default value is false
columnHeadersAsFrozenRows: false, // treat column headers as frozen rows when converting workbook to json, default value is false
includeAutoMergedCells: true // include the automatically merged cells to the real merged cells when converting the workbook to json.
}
let json = spread.toJSON(serializationOption)
excelIo.save(
json,
function (blob) {
saveAs(blob, fileName)
},
function (error) {
// process error
console.log(error)
}
)
},