Vue 导出表格为Excel
放法有多种,我这里是直接转JSON数据为Excel。
1.既然要使用,那首先当然是安装依赖,在终端命令输入:
npm install -S file-saver xlsx npm install -D script-loader
2.在项目src文件夹中创建一个文件夹来存放两个第三方js文件,名字就自取了。

3.点击按钮调用exportExcel方法,注意:require('@/Excel/Export2Excel.js')的路径以bulid文件夹下的webpack.base.config.js中alias的声明为准。

// 导出Excel
exportExcel(){
require.ensure([], () => {
const { export_json_to_excel } = require('@/Excel/Export2Excel.js'); //引入文件
const tHeader = ['创建时间','订单ID',......]; //表头
const filterVal = ['createTime', 'orderId',......];//table表格中对应的属性名(数据中的字段名)
const data = this.formatJson(filterVal, this.Cashdata); //表格绑定数据Cashdata转json
export_json_to_excel(tHeader, data, '订单列表');
})
},
formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => v[j]))
},
4.js文件放在我的网盘了 https://pan.baidu.com/s/1lA7-LhDLyN_o-TQ3a4L0wQ 提取码:gswf 。最后就大功告成了。
Vue 导出表格为Excel的更多相关文章
- qt技巧--使用html导出表格替代excel
曾经为qt不能直接导出excel而困扰,后来经过深入了解,得知qt支持xml国际语言,html是xml的一种.html是做网页的,相信大家比较熟悉.所以使用html的<table ...
- 【js】js导出表格到excel
js: function method(tableid) //读取表格中每个单元到EXCEL中 { var curTbl = document.getElementById(tableid); var ...
- vue 导出流文件excel
第一种方法:需要设置响应类型,这里还需要安装 npm install js-file-download --save ,然后引用 var fileDownload = require('js-file ...
- vue将表格导出为excel
vue将表格导出为excel 一:在项目中需要安装2个依赖项,如下命令: npm install --save file-saver xlsx 二:在vue文件中如下使用即可: <templat ...
- 【vue开发】vue导出Excel表格教程&demo
前端工作量最多的就是需求,需求就是一直在变,比如当前端数据写完之后,需要用Excel把数据下载出来:再比如前端在没有数据库想写些demo玩时,也是很好的选择. 第一步安装依赖包,修改配置 1.装依赖: ...
- vue+element 表格导出Excel文件
https://www.cnblogs.com/bobodeboke/p/8867481.html 非常感谢 这个大佬 才让我搞到了Blob.js 和 Export2Excel.js 如果最后运行时 ...
- vue中使用导出表格功能
1.下载依赖 npm install -S file-saver xlsx npm install -D script-loader 2.在src下创建vendor文件夹,并在文件夹中放两个文件 Bl ...
- vue+element 使用Export2Excel导出表格组件
下载表格组件是根据我自己的业务需求来封装的 使用的是vue中 xlsx 的插件,需要安装新的依赖及配置 仅供参考 不保证和你百分百匹配 安装依赖 npm install -S file-saver x ...
- vue 导出excel后端返回乱码下载不了的解析问题
有俩种方法可以用 第一种方法: 解析:直接解析并且下载后端的乱码 this.download('后端给的导出excel的方法', { ...this.queryParams }, ` ...
随机推荐
- Linux 运维笔试题(一)答案
答案: 1. ftp:21 远程连接telnet端口:23 smtp:25 rsync:873 SNMP:161 RPC(Remote Procedure Call,远程过程调用) ...
- P4555 [国家集训队]最长双回文串(回文树)
题目描述 顺序和逆序读起来完全一样的串叫做回文串.比如acbca是回文串,而abc不是(abc的顺序为abc,逆序为cba,不相同). 输入长度为 n 的串 S ,求 S 的最长双回文子串 T ,即可 ...
- iOS数字媒体开发浅析
概述 自然界中的所有看到的听到的都是模拟信号,模拟信号是随时间连续变化,然而手机电脑等信息都属于数字媒体,它们所呈现的内容就是把自然界中这些模拟信号转换成数字信号然后再传递给我们.数字信号不是连续的是 ...
- MapReduce实现线性回归
1. 软件版本号: Hadoop2.6.0(IDEA中源代码编译使用CDH5.7.3,相应Hadoop2.6.0),集群使用原生Hadoop2.6.4.JDK1.8,Intellij IDEA 14 ...
- HDU3265 Examining the Rooms【stirling数】
题目链接: http://acm.hdu.edu.cn/showproblem.php? pid=3625 题目大意: 有N个房间,每一个房间的要是随机放在某个房间内,概率同样.有K次炸门的机会. 求 ...
- hdu4691 Front compression(后缀数组)
Front compression Time Limit: 5000/5000 MS (Java/Others) Memory Limit: 102400/102400 K (Java/Others) ...
- 小贝_php+redis类型组合使用
php_redis类型组合使用 一.类型组合说明 经过前面的文章介绍.已经知道redis有字符串.集合.列表.hash等内置数据类型. 这里以,无序集合为例,进行说明. 集合 set1的简图 1.从简 ...
- 2.AngularJS-验证
转自:https://www.cnblogs.com/best/p/6225621.html 一.验证 angularJS中提供了许多的验证指令,可以轻松的实现验证,只需要在表单元素上添加相应的ng属 ...
- BZOJ 3196 线段树套平衡树
(代码无比丑陋) //By SiriusRen #include <cstdio> #include <algorithm> using namespace std; int ...
- Hue的三大特点、三大功能和架构
不多说,直接上干货! Hue 是 Cloudera 的大数据 Web 工具 官方访问网站 : http://gethue.com/ GitHub : https://github.com/cloude ...