vue 导出 table数据到 excle

下载js文件

感谢han6054 分享的 export-excel
git clone https://github.com/han6054/export-excel

添加依赖

npm install -S file-saver 用来生成文件的web应用程序
npm install -S xlsx 电子表格格式的解析器
npm install -D script-loader 将js挂在在全局下

修改文件

在工程模创建目录(vendor)并将文件Blob.js和Export2Excel.js 复制进去
如果报错 安装依赖 script-loader!src/vendor/Blob
修改Export2Excel.js

//require('script-loader!src/vendor/Blob');
require('./Blob.js');

添加方法

            //导出excle方法
            export2Excel(columns, resultData, fileName) {

                if (resultData.length < 1) {
                    this.$message.info("导出结果为空")
                    return;
                }
                require.ensure([], () => {
                    const {export_json_to_excel} = require('./vendor/Export2Excel');
                    const tHeader =  this.cutValue(columns,'title');
                    const filterVal = this.cutValue(columns, 'title');
                    const data = this.formatJson(filterVal, resultData);
                    export_json_to_excel(tHeader, data, fileName);
                })
            },
            //提取表头
            cutValue(target, name) {
                let arr = []
                for (let i = 0; i < target.length; i++) {
                    arr.push(target[i][name])
                }
                return arr
            },
            formatJson(filterVal, jsonData) {
                return jsonData.map(v => filterVal.map(j => v[j]))
            },

使用

<el-button icon="download" style="float:right;" @click="export2Excel(seniorColumns, seniorData, '查询结果')">导出查询结果
                    </el-button>

打开文件报错

excle 文件已损坏，无法打开

右键<属性>修改文件安全