項目需求：
開發一套基于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 需要添加的引用如下：
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. }
示例代碼下載
大家可下載下方的示例代碼，實現導出PDF、導入導出Excel功能。
SpreadJSVue.zip
SpreadJS 純前端表格控件
SpreadJS 是一款基于 html5 的純前端電子表格控件，兼容 450 種以上的 Excel 公式，憑借其 “高性能、跨平臺、與 Excel 高度兼容”的產品特性，備受以華為、招商銀行、蘇寧易購、天弘基金等為代表的企業用戶青睞。在帶來親切的 Excel 使用體驗的同時，滿足 Web Excel 組件開發、數據填報、Excel 類報表設計、在線Excel 協同應用等業務場景，極大降低了企業研發成本和項目交付風險。
