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 元件下載地址：

初始化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功能。