前端项目（如Vue）中，数据导出为Excel

1. 首先安装依赖: 

cnpm i -S file-saver xlsx

cnpm i -D script-loader

2. 将 Export2Excel.js 及 Blob.js (提取码: xufr) 放至项目相关目录下。试以 Vue 举例：

/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等类型的时候不适用

    var exportDataList = JSON.parse(JSON.stringify(this.tableData));

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

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

    var length = exportDataList.length;

    for(var 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;

    后续同上...