准备操作:安装依赖
npm install -S file-saver xlsx
npm install -D script-loader
创建文件夹
在目录下(一般为src目录)创建一个文件夹(一般取名为vendor)放入以下文件Blob.js和Export2Excel.js
附下载地址:链接:https://pan.baidu.com/s/1K7-lfBfnB1lPL1idIxbROg 提取码:cn07
配置Export2Excel.js文件
require('script-loader!file-saver');
require('./Blob');//配置地址根据实际配置
require('script-loader!xlsx/dist/xlsx.core.min');
定义方法
在需要使用的组件中定义方法
export2Excel() {
require.ensure([], () => {
const { export_json_to_excel } = require('../vendor/Export2Excel');
const tHeader = ['序号', '姓名', '性别',];//生成Excel表格的头部标题栏
const filterVal = ['id', 'xp', 'yp','xy'];//生成Excel表格的内容栏(根据自己的数据内容属性填写)
const list = this.forlist;//需要导出Excel的数据
const data = this.formatJson(filterVal, list);
export_json_to_excel(tHeader, data, '人事表');//这里可以定义你的Excel表的默认名称
})
},
formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => v[j]))
}
},
应用
给按钮添加点击事件
<button @click="export2Excel">导出Excel</button>