vue+iview中的table表格導出excel表格

1、iveiw框架中table中有exportCsv()方法能夠導出.csv後綴文件，相似於excel文件，可是並非excel文件。

2、實現table表格導出excel文件利用Blob.js 和 Export2Excel.js兩個文件實現

　　1.Blob.js 和 Export2Excel.js文件

　　　　連接：https://pan.baidu.com/s/1PvP-NxmONNh71SRDvlL_9A 密碼：3h82

　　2.把Blob.js 和 Export2Excel.js文件添加到src文件夾下的assets的文件夾下的js文件夾裏

　　　　在項目下還有有如下操做：

　　　　npm install -S file-saver //用來生成文件的web應用程序

　　　　npm install -S xlsx //電子表格格式的解析器

　　　　npm install -D script-loader //將js掛在在全局下

　　

　　3.在Export2Excel.js中配置

　　

　　這個地址和須要轉換excel文件的頁面的文件位置有關係，個人頁面文件在assets同級文件夾pages下的home文件夾下。

　　這個地址是Blob.js相對於導出excel文件頁面的相對位置

　　4.代碼

　　

 1 handleDownload() {
 2     this.downloadLoading = true;
 3     require.ensure([], () => {
 4         const {export_json_to_excel} = require('../../assets/js/Export2Excel') //這個地址和頁面的位置相關，這個地址是Export2Excel.js相對於頁面的相對位置
 5         const tHeader = ["序號", "客戶", "產品型號", "系列號", "銷售日期", "備註"]; //這個是表頭名稱 能夠是iveiw表格中表頭屬性的title的數組
 6         const filterVal = ["index", "customerName", "machineModel", "seriesNumber", "shipmentTime", "remarks"]; //與表格數據配合 能夠是iview表格中的key的數組
 7         const list = [{
 8                 "index": "1",
 9                 "customerName": "你好1",
10                 "machineModel": "你好2",
11                 "seriesNumber": "你好3",
12                 "shipmentTime": "你好4",
13                 "remarks": "你好5"
14             },
15             {
16                 "index": "2",
17                 "customerName": "hello world 1",
18                 "machineModel": "hello world 2",
19                 "seriesNumber": "hello world 3",
20                 "shipmentTime": "hello world 4",
21                 "remarks": "hello world 5"
22             },
23         ]; //表格數據，iview中表單數據也是這種格式！
24         const data = this.formatJson(filterVal, list)
25         export_json_to_excel(tHeader, data, '列表excel') //列表excel  這個是導出表單的名稱
26         this.downloadLoading = false
27     })
28 },
29 formatJson(filterVal, jsonData) {
30     return jsonData.map(v => filterVal.map(j => v[j]))
31 }

5.看了一些前輩的博客，有些差別，本身摸索可以導出excel文件。