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 }, ` ...
随机推荐
- CDH5.14操作指南
1.Cdh 5.14介绍 2.版本发布概要 3.安装要求 4.Cloudera Manager介绍 5.Cloudera 安装 6.Cloudera 管理 7.Cloudera Navigator C ...
- C#派生类中使用基类protected成员的方法
我们知道C#中通过继承可以使一个具有公共数据和方法的基类被广泛应用从而减少代码量,这样派生类会具有基类中所有成员(除构造器等),我们理所当然可以通过派生类实例来使用基类的成员.那么当基类成员被prot ...
- webpack入门与笔记
为什要使用WebPack 现今的很多网页其实可以看做是功能丰富的应用,它们拥有着复杂的JavaScript代码和一大堆依赖包.为了简化开发的复杂度,前端社区涌现出了很多好的实践方法 模块化,让我们可以 ...
- 去除input的前后的空格
这里用的是jquery的方法
- NodeJS学习笔记 (18)基础调试-console(ok)
模块概览 console模块提供了基础的调试功能.使用很简单,常用的API主要有 console.log().console.error(). 此外,可以基于Console类,方便的扩展出自己的con ...
- 洛谷 P1604 B进制星球
P1604 B进制星球 题目背景 进制题目,而且还是个计算器~~ 题目描述 话说有一天,小Z乘坐宇宙飞船,飞到一个美丽的星球.因为历史的原因,科技在这个美丽的星球上并不很发达,星球上人们普遍采用B(2 ...
- 多client并发登录
//LoginClient.java package mySocket; import java.io.BufferedReader; import java.io.InputStreamReader ...
- js --- 中字符串与unicode编码
1.charAt():把字符串分成每一个字符,从左往右提取指定位置的字符 var str = '天气'; alert( str.charAt(1) ); //气 2.charCo ...
- Xamarin大佬的地址
https://www.cnblogs.com/hlx-blogs/p/7266098.html http://www.cnblogs.com/GuZhenYin/p/6971069.html
- HTTP 协议基础及发展历史
一. 5层网络模型介绍 低三层 物理层:主要作用是定义物理设备如何传输数据. 数据链路层:在通信的实体间建立数据链路连接. 网路层:为数据在结点之间传输创建逻辑链路. 传输层: 想用户提供可靠的端到端 ...