技术干货：Vue框架下实现导入导出Excel及PDF _Excel

项目需求：开发一套基于Vue框架的工程档案管理系统，用于工程项目资料的填写、编辑和归档，经调研需支持如下功能：

Excel报表的导入、导出
PDF文件的导出
打印表格经过技术选型，项目组一致决定通过表格组件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
初始化Vue项目【技术干货：Vue框架下实现导入导出Excel及PDF】这里，可以参考这篇技术博客：只需3 分钟，就能创建一个SpreadJS 的 Vue 项目
项目运行效果：如下是本地的一个Excel文件：

文章插图

通过SpreadJS，导入到项目中的效果：

文章插图

我的项目中应用了SpreadJS V12.2.5的版本（目前官网SpreadJS的最新版本是V13），其中package.json 需要添加的引用如下：

1. "dependencies": {
2. "@grapecity/spread-excelio": "12.2.5",
3. "@grapecity/spread-sheets": "12.2.5",
4. "@grapecity/spread-sheets-pdf": "^12.2.5",
5. "@grapecity/spread-sheets-print": "12.2.5",
6. "@grapecity/spread-sheets-resources-zh": "12.2.5",
7. "@grapecity/spread-sheets-vue": "12.2.5",
8. "@grapecity/spread-sheets-charts": "12.2.5" ,
9. "file-saver": "2.0.2",
10. "jquery": "2.2.1",
11. "vue": "^2.5.2",
12. "vue-router": "^3.0.1"
13. },

执行npm install 命令安装SpreadJS 组件可以参考这篇技术博客：
https://www.grapecity.com.cn/blogs/spread-sheets-v11sp1-support-npm
导入导出Excel报表1. 安装相关的资源包： "@grapecity/spread-excelio"、 "file-saver"
2. 在页面中引入： import ExcelIO from '@grapecity/spread-excelio'、import FaverSaver from 'file-saver'
3. 如下代码可实现导入导出Excel：

1. exportXlsx () {
2. let ex = new ExcelIO.IO()
3. let json = this.spread.toJSON()
4. ex.save(json, function (blob) {
5. FaverSaver.saveAs(blob, 'export.xlsx')
6. }, function (e) {
7. console.log(e)
8. })
9. },
10. importXlsx(){
11. let self = this;
12. var excelIO = new ExcelIO.IO();
13. console.log(excelIO);
14. const excelFile = document.getElementById("fileDemo").files[0];
15. excelIO.open(excelFile, function (json) {
16. let workbookObj = json;
17. self.spread.fromJSON(workbookObj);
18. }, function (e) {
19. alert(e.errorMessage);
20. });
21. }

导出PDF的注意事项1. 安装相同版本的 PDF包： "@grapecity/spread-sheets-pdf"
2. 在需要打印的页面引入该包： import "@grapecity/spread-sheets-pdf";
3. 引入该包需要注意引入顺序，先引入 @grapecity/spread-sheets和 grapecity/spread-sheets-print
4. 需引入第三方插件file-saver ： import FaverSaver from 'file-saver'
5. 如下几行代码可实现导出PDF功能

1. savePdf(){
2. let self = this;
3. let jsonString = JSON.stringify(self.spread.toJSON());
4. let printSpread = new GC.Spread.Sheets.Workbook();
5. printSpread.fromJSON(JSON.parse(jsonString));
6.
7. printSpread.savePDF(function(blob) {
8. // window.open(URL.createObjectURL(blob))
9. FaverSaver.saveAs(blob, 'Hello.pdf')
10. }, function(error) {
11. console.log(error);
12. }, {
13. title: 'Print',
14. });
15. }