Vue 框架下实现导入导出 Excel、导出 PDF

项目需求：开发一套基于 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 项目

这里，可以参考这篇技术博客：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" }, 

执行 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：

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); }); } 

导出 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 功能

 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 功能。

SpreadJSVue.zip