VUE框架下实现导出PDF、导入导出Excel

本实例实现功能：VUE框架中 嵌入表格控件SpreadJS，实现导入Excel、导出Excel、导出PDF、打印表格等

初始化VUE项目
参考文章： 3分钟创建 SpreadJS 的 Vue 项目

项目运行效果：
本地的一个Excel文件：


导入Excel在项目中：


文章中的SpreadJS 版本是V11 的，现在最新版本已经是V13版本，我的例子中应用了SpreadJSV 12.2.5的版本，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

导出PDF功能注意事项

• - 安装相同版本的 pdf的包： "@grapecity/spread-sheets-pdf"
  
• - 在需要打印的页面引入该包： import  "@grapecity/spread-sheets-pdf";
• - 引入该包需要注意引入顺序，先引入 @grapecity/spread-sheets和 grapecity/spread-sheets-print
• - 需引入第三方插件file-saver ： import FaverSaver from 'file-saver'
• - 如下几行代码可实现导出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.     }

复制代码

导入导出Excel

• - 安装相关的包： "@grapecity/spread-excelio"、  "file-saver"
• - 在页面中引入： import ExcelIO from '@grapecity/spread-excelio'、import FaverSaver from 'file-saver'
• - 如下代码可实现导入导出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.     }

复制代码

可下载附件中的示例代码