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 }, ` ...
随机推荐
- UVa 1151 Buy or Build【最小生成树】
题意:给出n个点的坐标,现在需要让这n个点连通,可以直接在点与点之间连边,花费为两点之间欧几里得距离的平方,也可以选购套餐,套餐中所含的点是相互连通的 问最少的花费 首先想kruskal算法中,被加入 ...
- UVa 729 The Hamming Distance Problem【枚举排列】
题意:给出数组的长度n,给出h,表示这个数组里面含有h个1,求其所有的排列 用next_permutation就可以了 #include<iostream> #include<cst ...
- mysql优化篇之表分区
当表的数据量达到一定数量时(如单个.myd文件都达到10G,myd 是mysql的数据文件),这时候读取起来必然效率很低. 1.从业务角度可以解决(分表) ...
- php实现自动加载类
PHP 实现自动加载类:
- PHP 数组转字符串,字符串转数组
explode将字符串分割为数组: $str = explode( ',',$str); 第一个参数为字符串的分界符,例如1,2,3,4. 第二个是需要分割的数组 分割后就是 array( 1 , 2 ...
- C# Expression 树转化为SQL与语句(二)--解决参数问题
在用Expression解析的的时候碰到一些参数(不是具体的值),会出现这种情况. 在这里我们希望得到的是id=10,而不是id=m_id;那如何来解析这些参数? ================== ...
- 三种记录 MySQL 所执行过的 SQL 语句的方法
程式 Debug 有時後從前面第一行追起來很辛苦(程式碼太多或 compile 過), 另一種做法就是從後面追起來, 反正最後寫入的是 DB, 那就從 DB 開始往前推, 所以就是要抓程式是執行哪些 ...
- LINUX 系统初始化脚本
#!/bin/bash ######the system first start configuretion #####for install ####copy right by donglei## ...
- Servlet具体解释
Servlet具体解释 基本概述 Session在计算机中,尤其是在网络应用中,称为"会话控制".在计算机专业术语中.Session是指一个终端用户与交互系统进行通信的时间间隔,通 ...
- C++刷题——2802: 推断字符串是否为回文
Description 编敲代码,推断输入的一个字符串是否为回文. 若是则输出"Yes".否则输出"No". 所谓回文是指順读和倒读都是一样的字符串. Inpu ...