Vue项目中如何将数据导出为Excel

1. 首先安装依赖:

cnpm i -S file-saver xlsx  // or: npm i -S file-saver xlsx
cnpm i -D script-loader    // or: npm i -D script-loader

2. 将 Export2Excel.js 及 Blob.js 放至项目相关目录下:

/src/vendor/

tips:

如文件夹名称不为vendor, 则需修改 Export2Excel.js 里的文件引入路径

require('script-loader!@/vendor/Blob')    //修改为你的自定义路径

3. 在页面上使用:

        <button @click="exportData">导出数据<button>
 
         //导出数据
         exportData(){
             require.ensure([], () => {
                 const { export_json_to_excel } = require('@/vendor/Export2Excel');
                 //要输出的表头
                 const tHeader = ['用户手机号', '微信号', '状态'];
                 //表头对应的内容, 会从下行定义的 list 里去找相应的数据
                 const filterVal = ['phone','wechatNum','status'];
                 //数据来源
                 const list = this.tableData;
                 const data = this.formatJson(filterVal, list);
                 //fileName: 要导出的表格名称
                 export_json_to_excel(tHeader, data, 'fileName');
             })
         },
 
         formatJson(filterVal, jsonData) {
             return jsonData.map(v => filterVal.map(j => v[j]))
         }
         //导出数据end

tips:

  声明一个新的变量存放并修改要导出的数据，可以避免把如"状态: 1代表正常, 0代表封禁"，这样不直观的原始数据直接暴露给用户；

eg:

1. 声明变量存放数据

     //必须深拷贝,不能直接赋值。否则只是拷贝了存放在内存的路径指针，修改的话会直接影响原始数据
 
     let exportDataList = [...this.exportDataList.map(item => {
         return { ...item }
     })];
 
     // or
 
     //当数据含有function、undefined、date等类型的时候不适用
     let exportDataList = JSON.parse(JSON.stringify(this.tableData));

上面的例子列举了两种较为简单便(biàn)宜的深拷贝方法, 但有其不适用性, 还是推荐各位自行找寻兼容性更好的方式;

2. 简单来个循环, 修改要导出的数据

     let length = exportDataList.length;
     for(let i = 0; i < length; i++) {
         switch(exportDataList[i].payType) {
             case 0:
                 exportDataList[i].payType = '微信支付';
                 break;
             case 1:
                 exportDataList[i].payType = '支付宝';
                 break;
             default:
                 exportDataList[i].payType = '默认方式支付';
         }
     };
     const list = exportDataList;

把修改后的 exportDataList 赋值给第三步里声明的 list 即可