共计 1035 个字符,预计需要花费 3 分钟才能阅读完成。
使用 vue 导出表格数据至 Excel 表格中,自定义导出的 excel 表格数据
1. 安装,导入
- 先安装 script-loader,xlsx,file-saver;然后将主要的 js 导出文件加入
npm i script-loader -S
npm i xlsx -S
npm i file-saver -S
- excel 所需的 js 文件
2. 自定义数据导出
- 我找到一些文章,但是上面有好多是直接导出当前已渲染的表格中的数据,并不能够自定义导出所有数据
exportExcel() {require.ensure([], () => {const { export_json_to_excel} = require('@/excel/Export2Excel');
/* 设置 Excel 的表格第一行的标题 */
const tHeader = ['ID','店铺名称','公司'];
/* filterValue 里的值是 tableData 里对象的属性 */
const filterValue = ['id','shopname','companyname'];
const list = this.exportList;
/* 对要导出的数据进行加工,自定义,filterValue 中的字段名就是导出到 excel 中对应的数据键值 */
for(let i = 0; i < list.length; i++) {
/* 如要导出名字,则自定义 name 属性 */
list[i].name = list[i].lastname + '对的';
}
/* 把 data 里的 list 存到 list */
const data = this.formatJson(filterValue, list);
/* 最后一个项为导出的 excel 名字,可以随便定义 */
export_json_to_excel(tHeader, data, '列表');
});
},
formatJson(filterVal, jsonData) {return jsonData.map(v => filterVal.map(j => v[j]))
},
- 单独的设置一个字段来实现导出,这样才不会对原本渲染在页面上的数据造成污染
- 对于需要进行处理后再进行导出的数据,最好应该重新定义一个字段,这样就不会改变原有的数据,可以直接导出的数据,就直接将字段放入 filterValue 数组里就可以了
正在努力学习中,若对你的学习有帮助,留下你的印记呗(点个赞咯 ^_^)
-
往期推荐:
- 实现单行及多行文字超出后加省略号
- 判断 iOS 和 Android 及 PC 端
- 使用 vue 开发移动端管理后台
- 画三角形
- 微信小程序使用车牌号输入法
正文完
发表至: javascript
2019-10-14