vue中把table导出表格excel
1.首先下载2个js,我的百度网盘有
2.安装依赖
npm install -S file-saver xlsx(这里其实安装了2个依赖)
npm install -D script-loader
3.项目中新建一个文件夹:(vendor---名字任取)
你在哪个页面用导出这个功能,也可以直接跟这个页面同级新建这个文件夹
4.在你要导出文件的这个vue页面中写2个方法
// 导出excle的2个方法
export2Excel(){
require.ensure([], () => {
const { export_json_to_excel } = require('./vendor/Export2Excel');
const tHeader = [ '时间', '地址', '姓名'];
const filterVal = ['date', '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]))
}, 5.点击导出按钮调用这个方法--》export2Excel
this.export2Excel() 6.如果报错的话
在build----webpack.base.conf.js中resolve的alias加入 'vendor':path.resolve(__dirname,'../src/views/Sign/vendor'),即可解决
这个路径根据实际来调
这个js里面也要根据实际路径来相对的调整 7.导出结果(你想要啥子结果就去这个方法里面去配置啊)
之前一直有个问题,日妈的原来是老眼昏花把ths.tableData 没换成我自己的表格数组 ,所以数据源这里要注意换,如果你要导出全部数据的话 分页那里选择 +9999这样就可以全部导出了
BUG:当数据过大时,导出的excel可能为空?为啥呢?应为
应为ajax默认是异步请求,当你请求完毕这个导出js后,说不定你导出按钮调的接口还没跑完,所以可能导致请求的数据为空,导出的excel也只有页头,要么写promise,要么写在请求数据的里面,成功了在调excel这个js
vue中把table导出表格excel的更多相关文章
- Vue+element ui table 导出到excel
需求: Vue+element UI table下的根据搜索条件导出当前所有数据 参考: https://blog.csdn.net/u010427666/article/details/792081 ...
- 用js实现导出功能将html中的table导出为excel
/** * 描述:导出表格对应的excel文件 * 时间:2018-03-29 * 作者:任恩远 * 调用示例: * onclick = "tableToExcel(tableId,file ...
- js中的table导出成Excel表格
首先判断手否是IE,原因在于IE导出我用的是ActiveXObject,判断的方式很简单,只需要拿到window.navigator.userAgent即可进行判断,代码如下 function get ...
- HTML中的table导出为Excel文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- html table表格导出excel的方法 html5 table导出Excel HTML用JS导出Excel的五种方法 html中table导出Excel 前端开发 将table内容导出到excel HTML table导出到Excel中的解决办法 js实现table导出Excel,保留table样式
先上代码 <script type="text/javascript" language="javascript"> var idTmr; ...
- C# html的Table导出到Excel中
C#中导出Excel分为两大类.一类是Winform的,一类是Web.今天说的这一种是Web中的一种,把页面上的Table部分导出到Excel中. Table导出Excel,简单点说,分为以下几步: ...
- 【ASP.NET】C# 将HTML中Table导出到Excel(TableToExcel)
首先,说下应用场景 就是,把页面呈现的Table 导出到Excel中.其中使用的原理是 前台使用ajax调用aspx后台,传递过去参数值,导出.使用的组件是NPOI. 前台调用: <script ...
- HTML Table导出为Excel的方法
HTML Table导出为Excel的方法: 直接上源码 <html> <head> <meta http-equiv="Content-Type" ...
- 将Datagridview中的数据导出至Excel中
首先添加一个模块ImportToExcel,并添加引用 然后导入命名空间: Imports Microsoft.Office.Interop Imports System.Da ...
随机推荐
- STL 标准模板库
<vector> 可变长的数组 Vector<int>v int是一个模板参数,这样传进来的都会是int V.push_back(a)将a传进v,且放在最后一个 V.clear ...
- TOP100summit【分享实录-网易】构建云直播分发网络
本篇文章内容来自2016年TOP100summit网易视频云.网易杭州研究院服务端技术专家邵峰的案例分享.编辑:Cynthia 邵峰:网易视频云.网易杭州研究院服务端技术专家浙江大学计算机专业博士毕业 ...
- mysql索引及sql执行顺序
1, 红黑树 同一层级的黑树到根结点经历的黑树数目一样 最坏情况的时间复杂度 lg n 是二叉树b树 结点可以有多个孩子 b+树 父节点不存储数据聚集索引)的叶子节点会存储数据行,也就是说数据和索引是 ...
- 错误:22 http://ppa.launchpad.net/fkrull/deadsnakes/ubuntu bionic Release 404 Not Found [IP: 91.189.95.83 80]
https://blog.csdn.net/chenbetter1996/article/details/80255552 到仓库地址找到哦该文件 删除两个文件就可以了
- POJ 1816 - Wild Words - [字典树+DFS]
题目链接: http://poj.org/problem?id=1816 http://bailian.openjudge.cn/practice/1816?lang=en_US Time Limit ...
- HDU 4347 - The Closest M Points - [KDTree模板题]
本文参考: https://www.cnblogs.com/GerynOhenz/p/8727415.html kuangbin的ACM模板(新) 题目链接:http://acm.hdu.edu.cn ...
- iOS 问答时间
runloop 的 model作用是什么? 答案: model 主要是用来指定事件在运行循环中的优先级,分为: NSDefaultRunLoopMode(kCFRunLoopDefaultMode): ...
- Page9:结构分解以及系统内部稳定和BIBO稳定概念及其性质[Linear System Theory]
内容包含系统能控性结构分解.系统能观测性结构分解以及系统结构规范分解原理,线性系统的内部稳定.BIBO稳定概念及其性质
- [qemu][cloud][centos][ovs][sdn] centos7安装高版本的qemu 以及 virtio/vhost/vhost-user咋回事
因为要搭建ovs-dpdk,所以需要vhost-user的qemu centos默认的qemu与qemu-kvm都不支持vhost-user,qemu最高版本是2.0.0, qemu-kvm最高版本是 ...
- [skill] 异或
都怪学习不好,或者老师教的不好.虽然知道异或的算法,但是始终不明白,到底有什么意义...直到今天,终于明白了. 还是应该怪我学的不好,不能怪老师. 今天有一个应用场景,写一个函数.这是一个hash表的 ...