vue将表格数据导出为Excel

1.npm先安装三个包：

npm install file-saver --save
npm install xlsx --save
npm install script-loader --save-dev

2.下载两个js文件：

链接：https://pan.baidu.com/s/1X0CCKwnOcv4U9J6unpZNEA 密码：iidz
将两个js文件放入src文件夹内，最好新建空白文件夹。

3.修改js文件

如图，将红框中的路径修改你的Blob.js文件实际路径。不然会报错。

4.数据

export default{
    name: 'app',
    data(){
        return{
            columns: [
              {
                key: 'createDate', //导出数据的表头字段，对应导出的表格数据的键名
                value: '日期' //Excel表中对应的表头描述
              },
              {
                key: 'payUid',
                value: '支付方(UID)'
              }, {
                key: 'priceStr',
                value: '支付额'
              }, {
                key: 'coinName',
                value: '支付币种'
              }
            ],
            exportData: [], //导出数据
        }
    },
    methods:{
        exports(){
        //导出数据为Excel
            const {
              columns,
              exportData
            } = this;
            require.ensure([], () => {
              const {
                export_json_to_excel
              } = require('./../../excel/Export2Excel'); //  ---require 括号里面是相对路径其实是引用  Export2Excel.js
              const tHeader = []; //  ----tHeader 数组里面放的是字段的对应名
              const filterVal = [];　　 //　-----filterVal  字段对应的值
              columns && columns.map(data => {
                tHeader.push(data.value);
                filterVal.push(data.key);
              });
              const list = exportData; //                  ----对应的json数组
              const data = this.formatJson(filterVal, list);
              export_json_to_excel(tHeader, data, '支付明细');
           })
        },
        formatJson(filterVal, jsonData) {
            return jsonData.map(v => filterVal.map(j => v[j]))
        }
}