项目需求：

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

Excel报表的导入、导出PDF文件的导出打印表格经过技术选型，项目组一致决定通过表格组件SpreadJS 来实现。

以下是实现Excel报表的导入导出、PDF导出、打印表格的一些思路，供大家参考：

环境介绍

1.后台：Spring Boot 2.x

2.前台：vue、vue-element、webpack、iview、Vuex.js 2.x

3.组件：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-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. }

示例代码下载

大家可点击文末，了解更多。

SpreadJS 纯前端表格控件

SpreadJS 是一款基于 HTML5 的纯前端电子表格控件，兼容 450 种以上的 Excel 公式，凭借其 “高性能、跨平台、与 Excel 高度兼容”的产品特性，备受各行业知名企业用户的青睐。在带来亲切的 Excel 使用体验的同时，满足 Web Excel 组件开发、数据填报、Excel 类报表设计、在线Excel 协同应用等业务场景，极大降低了企业研发成本和项目交付风险。

关于葡萄城

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