vue将表格数据导出为Excel
1.npm先安装三个包:npm install file-saver --savenpm install xlsx --savenpm install script-loader --save-dev2.下载两个js文件:链接:[https://pan.baidu.com/s/1X0CCKwnOcv4U9J6unpZNEA](https://pan.baidu.com/s/1X0C...
·
1.npm先安装三个包:
npm install file-saver --save
npm install xlsx --save
npm install script-loader --save-dev
2.下载两个js文件:
链接:https://pan.baidu.com/s/1X0CCKwnOcv4U9J6unpZNEA 密码:iidz
将两个js文件放入src文件夹内,最好新建空白文件夹。
3.修改js文件
如图,将红框中的路径修改你的Blob.js文件实际路径。不然会报错。
4.数据
export default{
name: 'app',
data(){
return{
columns: [
{
key: 'createDate', //导出数据的表头字段,对应导出的表格数据的键名
value: '日期' //Excel表中对应的表头描述
},
{
key: 'payUid',
value: '支付方(UID)'
}, {
key: 'priceStr',
value: '支付额'
}, {
key: 'coinName',
value: '支付币种'
}
],
exportData: [], //导出数据
}
},
methods:{
exports(){
//导出数据为Excel
const {
columns,
exportData
} = this;
require.ensure([], () => {
const {
export_json_to_excel
} = require('./../../excel/Export2Excel'); // ---require 括号里面是相对路径其实是引用 Export2Excel.js
const tHeader = []; // ----tHeader 数组里面放的是字段的对应名
const filterVal = []; // -----filterVal 字段对应的值
columns && columns.map(data => {
tHeader.push(data.value);
filterVal.push(data.key);
});
const list = exportData; // ----对应的json数组
const data = this.formatJson(filterVal, list);
export_json_to_excel(tHeader, data, '支付明细');
})
},
formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => v[j]))
}
}
更多推荐
已为社区贡献12条内容
所有评论(0)