Vue2.0---将页面中表格数据导出excel
这不是教程,是随笔。
项目中将后台返回的数据v-for到表格中,然后需要将这个表格导出为EXCEL
只说怎么做。
一、需要安装三个依赖:
npm install -S file-saver xlsx
npm install -D script-loader
二、项目中新建一个文件夹:(vendor---名字任取)
里面放置两个文件Blob.js和 Export2Excel.js。
百度可下载。
三、在.vue文件中
写这两个方法:其中list是表格的内容
export2Excel() {
require.ensure([], () => {
const { export_json_to_excel } = require('../../vendor/Export2Excel');
const tHeader = ['序号', 'IMSI', 'MSISDN', '证件号码', '姓名'];
const filterVal = ['ID', 'imsi', 'msisdn', '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]))
}
四、按钮导出调用export2Excel方法
注:如果webpack报解析错误:
在build----webpack.base.conf.js中resolve的alias加入 'vendor': path.resolve(__dirname, '../src/vendor'),
即可解决
alias是配置别名
pass:需要那两个文件的可以加我微信 18210001575
Vue2.0---将页面中表格数据导出excel的更多相关文章
- 将页面中表格数据导出excel格式的文件(vue)
近期由于项目需要,需要将页面中的表格数据导出excel格式的文件,折腾了许久,在网上各种百度,虽然资料不少,但是大都不全,踩了许多坑,总算是皇天不负有心人,最后圆满解决了. 1.安装相关依赖(npm安 ...
- Vue+element UI实现表格数据导出Excel组件
介绍 这是一个可以将页面中的表格数据导出为Excel文件的功能组件,该组件一般与表格一起使用,将表格数据传给组件,然后通过点击组件按钮可将表格中的数据导出成Excel文件. 使用方法 由于封装该组件内 ...
- 前端 vue表格数据导出Excel 文件实现
实现思路 使用json2csv将后台json数据转化为csv格式数据 采用创建Blob(二进制大对象)的方式来存放缓存数据: 生成下载链接: 创建一个a标签,设置href和download属性 触发a ...
- vue2.0在页面中自定义组件模块,以及页面与组件之间的数据传递
1,在初始文件index.html中加入要引入的模块,注意驼峰命名的方式(我就是没写成驼峰,报错) <!DOCTYPE html> <html> <head> &l ...
- JS将页面中表格,导出到Excel中(IE中)
原文地址:http://blog.csdn.net/sinat_15114467/article/details/51098522 var idTmr; function getExplorer() ...
- ASP.Net MVC中数据库数据导出Excel,供HTTP下载(转)
转自http://www.cnblogs.com/hipo/archive/2012/03/13/2394019.html 一.关于下载 一般对下载权限有没有限制,或安全性要求不高的情况下,基于web ...
- ASP.Net MVC中数据库数据导出Excel,供HTTP下载
本文来自:http://www.cnblogs.com/hipo/archive/2012/03/13/2394019.html 一.关于下载 一般对下载权限有没有限制,或安全性要求不高的情况下,基于 ...
- 前端表格数据导出excel
使用tableExport.js导出bootstrap-table表格成excel并且支持中文 1. 下载tableExport.js https://github.com/hhurz/tableEx ...
- MVC 实现表格数据导出Excel(NPOI方式)
前端View(@ViewBag为查询条件): <span id="exprobtn" class="btn_blue" style="dispa ...
随机推荐
- 生成对抗网络资源 Adversarial Nets Papers
来源:https://github.com/zhangqianhui/AdversarialNetsPapers AdversarialNetsPapers The classical Papers ...
- Composer\Downloader\TransportException ... Failed to enable crypto,failed to open stream: operation failed
failed to open stream: operation failed 错误详细信息: [Composer\Downloader\TransportException] The "h ...
- jenkins git项目clean before checkout 和 wipe out repository & force clone
clean before checkout:会先执行一遍git clone,删除一些untracked文件和目录,比如删除上一次打包编译产生的文件 wipe out repository & ...
- DevExpress ASP.NET Core Controls 2019发展蓝图(No.5)
本文主要为大家介绍DevExpress ASP.NET Core Controls 2019年的官方发展蓝图,更多精彩内容欢迎持续收藏关注哦~ [DevExpress ASP.NET Controls ...
- Python---进阶---多线程---threading
一. 使用多线程去播放两个播放列表,一个是movie,一个是music _thread threading ------------------------------------------ imp ...
- sql中count(1)和count(*)有区别吗
count(*) 对 innodb 而言,它需要把数据从磁盘中读取出来然后累计计数:而 MyISAM 引擎把一个表的总行数存在了磁盘上,所以执行 count(*) 会直接返回这个数,如果有 where ...
- 对SQL 优化,提升性能!
对SQL 进行优化能够有效提高SQL 语句的执行效率,降低系统资源开销,是开发者提高后端系统处理能力的首选方案. 新产品上线后,随着运营推广活动的开始,业务进入快速增长期,数据库作为后端系统唯一或者主 ...
- 超大文件上传方案( Java )
1.介绍enctype enctype 属性规定发送到服务器之前应该如何对表单数据进行编码. enctype作用是告知服务器请求正文的MIME类型(请求消息头content-type的作用一样) 1. ...
- 6.20校内考试整理——大美江湖&&腐草为萤&&锦鲤抄题解
先安利一下题目作者:一扶苏一 先看第一题: 这道题就是一道简单的模拟题,只要不管一开始的位置,模拟移动与格子对应的触发事件就行了.话不多说,看代码: #include<iostream> ...
- windows 下的定时任务 (原)
linux 下的定时任务是crontab 以前都是linux的定时任务,这次在windows做了定时任务,简单记录一下(win8 跟 win10为例) windows 2008下的定时任务配置: 控制 ...