项目需求：开发一套基于Vue框架的工程档案管理系统，用于工程项目资料的填写、编辑和归档，经调研需支持如下功能：Excel报表的导入、导出PDF文件的导出打印表格经过技术选型，项目组一致决定通过表格组件SpreadJS 来实现。
以下是实现Excel报表的导入导出、PDF导出、打印表格的一些思路，供大家参考：环境介绍

1.后台：Spring Boot 2.x2.前台：vue、vue-element、webpack、iview、Vuex.js 2.x3.组件：SpreadJs V11初始化Vue项目这里，可以参考这篇技术博客： 只需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 组件导入导出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-print4. 需引入第三方插件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. }示例代码下载大家可点击文末，了解更多。
SpreadJS 纯前端表格控件SpreadJS 是一款基于 HTML5 的纯前端电子表格控件，兼容 450 种以上的 Excel 公式，凭借其 “高性能、跨平台、与 Excel 高度兼容”的产品特性，备受各行业知名企业用户的青睐。
在带来亲切的 Excel 使用体验的同时，满足 Web Excel 组件开发、数据填报、Excel 类报表设计、在线Excel 协同应用等业务场景，极大降低了企业研发成本和项目交付风险。
关于葡萄城赋能开发者。

葡萄城公司成立于 1980 年，是全球领先的集开发工具、商业智能解决方案、低代码开发平台于一身的软件和服务提供商。
西安葡萄城是其在中国的分支机构，面向全球市场提供软件研发服务，并为中国企业的信息化提供国际先进的开发工具、软件和研发咨询服务。
葡萄城的控件和软件产品在国内外屡获殊荣，在全球被数十万家企业、学校和政府机构广泛应用。