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 }, ` ...
随机推荐
- HNU 11979 Roll call 二分图匹配
题意: 众所周知,老师经常在班级上点名.点名是从名单上叫一个人的名字或者id来判断名单上这个人是否在场.学生们总是有各种各样的理由不来,所以他们需要其他人帮他们答到.但是打到工作不是这么简单,出于各种 ...
- [React Native] Use the SafeAreaView Component in React Native for iPhone X Compatibility
In this lesson, you will learn how to use the SafeAreaView component to avoid the sensor cluster (th ...
- 面对即将终止支持的server你还能做些什么
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaXF1c2hp/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/d ...
- 在Unix上用 BIND建立名称服务器(naem server)
在Unix上用 BIND建立名称服务器(naem server) 安装 apt install -y bind9 yum install -y bind bind-utils 下载源码并解压缩,htt ...
- numpy 数据类型与 Python 原生数据类型
查看 numpy 数据类型和 Python 原生数据类型之间的对应关系: In [51]: dict([(d, type(np.zeros(1,d).tolist()[0])) for d in (n ...
- cookies,sessionStorage和localStorage的区别
共同点:都是保存在浏览器端,且同源的.区别:cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递.而sessionStorage和localStora ...
- POJ 1986 裸的LCA
思路:搞了一发链剖 //By SiriusRen #include <cstdio> #include <cstring> #include <algorithm> ...
- BZOJ 3211 线段树+并查集
思路: 我们很容易发现 一个数开根号 开几(很小)次 就到了1 1 再怎么开 都是1 由于这个性质 我们就可以用并查集 了 //By SiriusRen #include <cmath> ...
- Gym - 100203H Highways 最小生成树
题意:平面上n个点修路,已经修好了m条,再修若干条使得点之间连通,求最小代价的方案. 思路:基本上是裸的最小生成树了,我这里存边直接存在multyset了,取的时候也比较方便,我本来就是这么考虑的,队 ...
- Excel 文本内容拆分
1.首先把文本数据粘贴到excel-->在旁边插入空白列..选择数据-->分列-->固定宽度 2.数据预览点击下一步 3.最后分好的数据就在 归去来兮,田园将芜胡不归?既自以心为形役 ...