标签：exce 相同 sources 管理 sheet 工程 开发 导入 open
经过技术选型，项目组一致决定通过表格组件SpreadJS 来实现。以下是实现Excel报表的导入导出、PDF导出、打印表格的一些思路，供大家参考：
1.后台：Spring Boot 2.x
2.前台：vue、vue-element、webpack、iview、Vuex.js 2.x
3.组件：SpreadJS V11
SpreadJS 组件下载地址：https://www.grapecity.com.cn/download/?pid=57
这里，可以参考这篇技术博客： 3分钟创建 SpreadJS 的 Vue 项目
如下是本地的一个Excel文件：
通过SpreadJS，导入到项目中的效果：
我的项目中应用了SpreadJS V12.2.5的版本（目前官网SpreadJS的最新版本是V13），其中package.json 需要添加的引用如下：
"dependencies": {
"@grapecity/spread-excelio": "12.2.5",
"@grapecity/spread-sheets": "12.2.5",
"@grapecity/spread-sheets-pdf": "^12.2.5",
"@grapecity/spread-sheets-print": "12.2.5",
"@grapecity/spread-sheets-resources-zh": "12.2.5",
"@grapecity/spread-sheets-vue": "12.2.5",
"@grapecity/spread-sheets-charts": "12.2.5" ,
"file-saver": "2.0.2",
"jquery": "2.2.1",
"vue": "^2.5.2",
"vue-router": "^3.0.1"
},
可以参考这篇技术博客：https://www.grapecity.com.cn/blogs/spread-sheets-v11sp1-support-npm
exportXlsx () {
let ex = new ExcelIO.IO()
let json = this.spread.toJSON()
ex.save(json, function (blob) {
FaverSaver.saveAs(blob, ‘export.xlsx‘)
}, function (e) {
console.log(e)
})
},
importXlsx(){
let self = this;
var excelIO = new ExcelIO.IO();
console.log(excelIO);
const excelFile = document.getElementById("fileDemo").files[0];
excelIO.open(excelFile, function (json) {
let workbookObj = json;
self.spread.fromJSON(workbookObj);
}, function (e) {
alert(e.errorMessage);
});
}
savePdf(){
let self = this;
let jsonString = JSON.stringify(self.spread.toJSON());
let printSpread = new GC.Spread.Sheets.Workbook();
printSpread.fromJSON(JSON.parse(jsonString));
printSpread.savePDF(function(blob) {
// window.open(URL.createObjectURL(blob))
FaverSaver.saveAs(blob, ‘Hello.pdf‘)
}, function(error) {
console.log(error);
}, {
title: ‘Print‘,
});
}
大家可下载下方的示例代码，实现导出PDF、导入导出Excel功能。
标签：exce 相同 sources 管理 sheet 工程 开发 导入 open
原文地址：https://www.cnblogs.com/C1SupportTeam/p/11904848.html
