Vue--将页面中数据导出excel文件（table表格数据）

一、 安装三个依赖项

[code]$ npm install -S file-saver
$ npm install -S xlsx
$ npm install -D script-loader

二、在项目中新建一个文件夹（一般在src下新建，文件名自取，在这里命名为excel），在文件夹中放入Blob.js 和 export2Excel.js （这两个文件可在gitup上进行下载）

Blob.js ，export2Excel.js下载地址：https://pan.baidu.com/s/1bzLCiRFvPy2S1FAnNzJsBA 密码：kqfq

三、在build文件夹下找到webpack.base.conf.js做如下修改

[code]resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'scss_vars': '@/styles/vars.scss',
'excel': path.resolve(__dirname, '../src/excel'),//新增一行
}
},

四、在vue文件中添加下载功能

[code]//列表下载
downloadExcel() {
this.$confirm('确定下载列表文件?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.excelData = this.selectData //你要导出的数据list。
this.export2Excel()
}).catch(() => {

});
},
export2Excel() {
var that = this;
require.ensure([], () => {
const { export_json_to_excel } = require('@/excel/export2Excel'); //这里必须使用绝对路径
const tHeader = ['统一编号','海关编号','境内收发货人','提运单号']; // 导出的表头名
const filterVal = ['unifiedNo','customsNo', 'teRsComanyName', 'deliveryNo']; // 导出的表头字段名
const list = that.excelData;
const data = that.formatJson(filterVal, list);

export_json_to_excel(tHeader, data, '下载数据excel');// 导出的表格名称，根据需要自己命名
})
},
formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => v[j]))
},