項(xiàng)目需求：

開(kāi)發(fā)一套基于Vue框架的工程檔案管理系統(tǒng)，用于工程項(xiàng)目資料的填寫(xiě)、編輯和歸檔，經(jīng)調(diào)研需支持如下功能：

Excel報(bào)表的導(dǎo)入、導(dǎo)出
PDF文件的導(dǎo)出
打印表格經(jīng)過(guò)技術(shù)選型，項(xiàng)目組一致決定通過(guò)表格組件SpreadJS 來(lái)實(shí)現(xiàn)。

以下是實(shí)現(xiàn)Excel報(bào)表的導(dǎo)入導(dǎo)出、PDF導(dǎo)出、打印表格的一些思路，供大家參考：

環(huán)境介紹

1.后臺(tái)：Spring Boot 2.x

2.前臺(tái)：vue、vue-element、webpack、iview、Vuex.js 2.x

3.組件：SpreadJs V11

SpreadJS 組件下載地址：https://www.grapecity.com.cn/download/?pid=57

初始化Vue項(xiàng)目

這里，可以參考這篇技術(shù)博客：只需3 分鐘，就能創(chuàng)建一個(gè)SpreadJS 的 Vue 項(xiàng)目

項(xiàng)目運(yùn)行效果：

如下是本地的一個(gè)Excel文件：

技術(shù)干貨：Vue框架下實(shí)現(xiàn)導(dǎo)入導(dǎo)出Excel及PDF

通過(guò)SpreadJS，導(dǎo)入到項(xiàng)目中的效果：

我的項(xiàng)目中應(yīng)用了SpreadJS V12.2.5的版本（目前官網(wǎng)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. },

執(zhí)行npm install 命令安裝SpreadJS 組件

可以參考這篇技術(shù)博客：

https://www.grapecity.com.cn/blogs/spread-sheets-v11sp1-support-npm

導(dǎo)入導(dǎo)出Excel報(bào)表

1. 安裝相關(guān)的資源包： "@grapecity/spread-excelio"、 "file-saver"

2. 在頁(yè)面中引入： import ExcelIO from '@grapecity/spread-excelio'、import FaverSaver from 'file-saver'

3. 如下代碼可實(shí)現(xiàn)導(dǎo)入導(dǎo)出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. }

導(dǎo)出PDF的注意事項(xiàng)

1. 安裝相同版本的 PDF包： "@grapecity/spread-sheets-pdf"

2. 在需要打印的頁(yè)面引入該包： import "@grapecity/spread-sheets-pdf";

3. 引入該包需要注意引入順序，先引入 @grapecity/spread-sheets和 grapecity/spread-sheets-print

4. 需引入第三方插件file-saver ： import FaverSaver from 'file-saver'

5. 如下幾行代碼可實(shí)現(xiàn)導(dǎo)出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. }

示例代碼下載

大家可下載下方的示例代碼，實(shí)現(xiàn)導(dǎo)出PDF、導(dǎo)入導(dǎo)出Excel功能。

SpreadJSVue.zip

SpreadJS 純前端表格控件

SpreadJS 是一款基于 html5 的純前端電子表格控件，兼容 450 種以上的 Excel 公式，憑借其 “高性能、跨平臺(tái)、與 Excel 高度兼容”的產(chǎn)品特性，備受以華為、招商銀行、蘇寧易購(gòu)、天弘基金等為代表的企業(yè)用戶(hù)青睞。在帶來(lái)親切的 Excel 使用體驗(yàn)的同時(shí)，滿(mǎn)足 Web Excel 組件開(kāi)發(fā)、數(shù)據(jù)填報(bào)、Excel 類(lèi)報(bào)表設(shè)計(jì)、在線(xiàn)Excel 協(xié)同應(yīng)用等業(yè)務(wù)場(chǎng)景，極大降低了企業(yè)研發(fā)成本和項(xiàng)目交付風(fēng)險(xiǎn)。