Vue2.0实现将页面中表格数据导出excel的实例


Posted in Javascript onAugust 09, 2017

这两天学习了Vue.js 感觉知识点挺多的,所以,今天添加一点小笔记。

项目中将后台返回的数据v-for到表格中,然后需要将这个表格导出为EXCEL

只说怎么做。

一、需要安装三个依赖:

npm install -S file-saver xlsx
npm install -D script-loader

二、项目中新建一个文件夹:(vendor---名字任取)

里面放置两个文件Blob.js和 Export2Excel.js。

Blob.js和 Export2Excel.js文件下载地址:Export2Exce_3water.rar

三、在.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是配置别名 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Ajax异步提交表单数据的说明及方法实例
Jun 22 Javascript
JS中innerHTML和pasteHTML的区别实例分析
Jun 22 Javascript
jQuery获取attr()与prop()属性值的方法及区别介绍
Jul 06 Javascript
js控住DOM实现发布微博效果
Aug 30 Javascript
JavaScript实现的原生态Tab标签页功能【兼容IE6】
Sep 18 Javascript
vue计算属性时v-for处理数组时遇到的一个bug问题
Jan 21 Javascript
Vue动画事件详解及过渡动画实例
Feb 09 Javascript
js实现无限层级树形数据结构(创新算法)
Feb 27 Javascript
JS函数本身的作用域实例分析
Mar 16 Javascript
微信小程序实现发微博功能的示例代码
Jun 24 Javascript
vue 出现data-v-xxx的原因及解决
Aug 04 Javascript
js闭包和垃圾回收机制示例详解
Mar 01 Javascript
webpack 1.x升级过程中的踩坑总结大全
Aug 09 #Javascript
微信小程序开发教程之增加mixin扩展
Aug 09 #Javascript
javascript编程开发中取色器及封装$函数用法示例
Aug 09 #Javascript
vuejs父子组件之间数据交互详解
Aug 09 #Javascript
Angular在模板驱动表单中自定义校验器的方法
Aug 09 #Javascript
浅谈react+es6+webpack的基础配置
Aug 09 #Javascript
js中less常用的方法小结
Aug 09 #Javascript
You might like
php数组应用之比较两个时间的相减排序
2008/08/18 PHP
thinkPHP的Html模板标签使用方法
2012/11/13 PHP
Ubuntu上安装yaf扩展的方法
2018/01/29 PHP
ThinkPHP中图片按比例切割的代码实例
2019/03/08 PHP
js输出列表实现代码
2010/09/12 Javascript
jquery封装的对话框简单实现
2013/07/21 Javascript
jquery动态添加元素事件失效问题解决方法
2014/05/23 Javascript
Javascript 绘制 sin 曲线过程附图
2014/08/21 Javascript
JS获取当前网页大小以及屏幕分辨率等
2014/09/05 Javascript
jquery实现数字输入框
2017/02/22 Javascript
Webpack执行命令参数详解
2017/06/17 Javascript
Angular 2 ngForm中的ngModel、[ngModel]和[(ngModel)]的写法
2017/06/29 Javascript
JS如何设置元素样式的方法示例
2017/08/28 Javascript
JavaScript中call和apply方法的区别实例分析
2018/08/03 Javascript
JS实现简单tab选项卡切换
2019/10/25 Javascript
js实现无缝轮播图
2020/03/09 Javascript
JS删除对象中某一属性案例详解
2020/09/08 Javascript
[02:31]《DAC最前线》之选手酒店现场花絮
2015/01/30 DOTA
[37:23]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第二局
2016/03/04 DOTA
[01:00]一分钟回顾2018DOTA2亚洲邀请赛现场活动
2018/04/07 DOTA
python函数缺省值与引用学习笔记分享
2013/02/10 Python
Django Highcharts制作图表
2016/08/27 Python
分享给Python新手们的几道简单练习题
2017/09/21 Python
英语文学专业学生的自我评价
2013/10/31 职场文书
硕士研究生自我鉴定范文
2013/12/27 职场文书
应届行政管理专业个人自我评价
2013/12/28 职场文书
安全标语大全
2014/06/10 职场文书
学校督导评估方案
2014/06/10 职场文书
社区精神文明建设汇报材料
2014/08/17 职场文书
学生会竞选演讲稿纪检部
2014/08/25 职场文书
乡镇干部个人整改措施思想汇报
2014/10/10 职场文书
滴水洞导游词
2015/02/10 职场文书
求职自我评价范文
2015/03/09 职场文书
2016五四青年节活动总结范文
2016/04/06 职场文书
一小时学会TensorFlow2之基本操作2实例代码
2021/09/04 Python
win10忘记pin密码登录不了怎么办?win10忘记pin密码登不进去的解决方法
2022/07/07 数码科技