vue基於Blob.js和 Export2Excel.js做前端導出

1安裝三個依賴包

npm install -S file-saver@2.0.2
npm install -S xlsx@0.15.6
npm install -D script-loader@0.7.2

2導入兩個js

下載Blob.js和Export2Excel.js，在src目錄下新建Excel文件夾，里面放入Blob.js和Export2Excel.js兩個JS文件，下面有

　鏈接: https://pan.baidu.com/s/1kmpEq2If39HbHFrXdpQRPw 密碼: 2694 （有這兩個文件）　

3.main.js 引入文件

import Blob from './Excel/Blob'
import Export2Excel from './Excel/Export2Excel.js'

組件中使用

 

//導出的方法
exportExcel() {
  require.ensure([], () => {
    const { export_json_to_excel } = require('../Excel/Export2Excel');//注意這個Export2Excel路徑
    const tHeader = ['序號', '昵稱', '姓名'];   // 上面設置Excel的表格第一行的標題
    const filterVal = ['index', 'nickName', 'name']; // 上面的index、nickName、name是tableData里對象的屬性key值
    const list = this.tableData;  //把要導出的數據tableData存到list
    const data = this.formatJson(filterVal, list);
    export_json_to_excel(tHeader, data, '列表excel');//最后一個是表名字
  })
},
formatJson(filterVal, jsonData) {
  return jsonData.map(v => filterVal.map(j => v[j]))
}

5.如果報錯，可能路徑問題

 

 報錯信息TypeError: Cannot read property 'encode_cell' of undefined 解決方案 Export2Excel.js中引入了XLSX