欢迎进入广州凡科互联网科技有限公司网站
全国服务热线
4000-399-000
微信游戏小程序_Vue2.0完成将页面中表格数据导出
时间: 2021-01-11 15:30 浏览次数:
Vue2.0完成将网页页面中报表数据信息导出来excel的案例 新项目里将后台管理回到的数据信息v-for到报表中,随后必须将这一报表导出来为EXCEL只说如何做。一、必须安裝三个依靠:
Vue2.0实现将页面中表格数据导出excel的实例       本篇文章主要介绍了Vue2.0实现将页面中表格数据导出excel的实例,非常具有实用价值,感兴趣的同学可以了解一下

项目中将后台返回的数据v-for到表格中,然后需要将这个表格导出为EXCEL

只说怎么做。

一、需要安装三个依赖:

npm install -S file-saver xlsx
npm install -D script-loader

二、项目中新建一个文件夹:(vendor---名字任取)

里面放置两个文件Blob.js和 Export2Excel.js。

三、在.vue文件中

写这两个方法:其中list是表格的内容

 export2Excel() {
 require.ensure([], () = {
 const { export_json_to_excel } = require('../../vendor/Export2Excel');
 const tHeader = ['序号', 'IMSI', 'MSISDN', '证件号码', '姓名'];
 const filterVal = ['ID', 'imsi', 'msisdn', 'address', 'name'];
 const list = this.tableData;
 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]))
 }

四、按钮导出调用export2Excel方法

注:如果webpack报解析错误:

在build----webpack.base.conf.js中resolve的alias加入 'vendor': path.resolve(__dirname, '../src/vendor'),

即可解决

另:alias是配置别名

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。




Copyright © 广州凡科互联网科技有限公司 版权所有 粤ICP备10235580号
全国服务电话:4000-399-000   传真:021-45545458
公司地址:广州市海珠区工业大道北67号凤凰创意园