vue如何将v-for中的表格导出来


Posted in Javascript onMay 07, 2018

一、需要安装以下依赖

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

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

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

三、在.vue文件中

     写这两个方法:其中list是表格的内容           

//export2Excel是你点击导出所绑定的方法名

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;//tableData是你表单所绑定的数据名称,一定要对应




const data = this.formatJson(filterVal, list);




export_json_to_excel(tHeader, data, '列表excel');//列表excel这个是导出以后表格的名称,根据需要自行更改



})


},


formatJson(filterVal, jsonData) {



return jsonData.map(v => filterVal.map(j => v[j]))


}

总结

以上所述是小编给大家介绍的vue如何将v-for中的表格导出来,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
图片完美缩放
Sep 07 Javascript
(function($){...})(jQuery)的意思
Jul 22 Javascript
js 限制input只能输入数字、字母和汉字等等
Dec 18 Javascript
JavaScript获取URL中参数querystring的方法详解
Oct 11 Javascript
Vue系列:通过vue-router如何传递参数示例
Jan 16 Javascript
jQuery插件HighCharts实现的2D面积图效果示例【附demo源码下载】
Mar 15 Javascript
Bootstrap框架建立树形菜单(Tree)的实例代码
Oct 30 Javascript
React Native使用Modal自定义分享界面的示例代码
Oct 31 Javascript
webuploader实现上传图片到服务器功能
Aug 16 Javascript
百度小程序之间的页面通信过程详解
Jul 18 Javascript
Vue中的this.$options.data()和this.$data用法说明
Jul 26 Javascript
OpenLayer3自定义测量控件MeasureTool
Sep 28 Javascript
浅谈Vue 数据响应式原理
May 07 #Javascript
浅谈Vue响应式(数组变异方法)
May 07 #Javascript
在HTML文档中嵌入JavaScript的四种方法
May 07 #Javascript
详解JavaScript的BUG和错误
May 07 #Javascript
vue实现个人信息查看和密码修改功能
May 06 #Javascript
基于vue-element组件实现音乐播放器功能
May 06 #Javascript
VueJs组件之父子通讯的方式
May 06 #Javascript
You might like
PHILIPS L4X25T电路分析和打理
2021/03/02 无线电
php数组合并的二种方法
2014/03/21 PHP
通过curl模拟post和get方式提交的表单类
2014/04/23 PHP
Symfony2框架学习笔记之表单用法详解
2016/03/18 PHP
PHP 实现人民币小写转换成大写的方法及大小写转换函数
2017/11/17 PHP
Yii框架中使用PHPExcel的方法分析
2019/07/25 PHP
使用闭包对setTimeout进行简单封装避免出错
2013/07/10 Javascript
jQuery查询数据返回object和字符串影响原因是什么
2013/08/09 Javascript
Nodejs进程管理模块forever详解
2014/06/01 NodeJs
nodejs的10个性能优化技巧
2014/07/15 NodeJs
jquery果冻抖动效果实现方法
2015/01/15 Javascript
Javascript非构造函数的继承
2015/04/27 Javascript
JS动态创建DOM元素的方法
2015/06/09 Javascript
javascript瀑布流布局实现方法详解
2016/02/17 Javascript
Angualrjs和bootstrap相结合实现数据表格table
2017/03/30 Javascript
jQuery实现拖动效果的实例代码
2017/06/25 jQuery
Vue 2.5 Level E 发布了: 新功能特性一览
2017/10/24 Javascript
浅谈vue2 单页面如何设置网页title
2017/11/08 Javascript
JS实现的简单下拉框联动功能示例
2018/05/11 Javascript
JS实现数组去重,显示重复元素及个数的方法示例
2019/01/21 Javascript
webpack中如何加载静态文件的方法步骤
2019/05/18 Javascript
[06:36]吞吞映像top1
2014/06/20 DOTA
python根据距离和时长计算配速示例
2014/02/16 Python
在 Django/Flask 开发服务器上使用 HTTPS
2014/07/03 Python
各个系统下的Python解释器相关安装方法
2015/10/12 Python
python实现在pandas.DataFrame添加一行
2018/04/04 Python
pandas groupby 分组取每组的前几行记录方法
2018/04/20 Python
使用Python向DataFrame中指定位置添加一列或多列的方法
2019/01/29 Python
python 自动识别并连接串口的实现
2021/01/19 Python
钉钉企业内部H5微应用开发详解
2020/05/12 HTML / CSS
Theory美国官网:后现代都市风时装品牌
2018/05/09 全球购物
英国玛莎百货新西兰:Marks & Spencer New Zealand
2019/07/21 全球购物
北京一家公司的.net开发工程师笔试题
2012/04/17 面试题
幼儿教师师德演讲稿
2014/05/06 职场文书
校庆活动策划方案
2014/06/05 职场文书
Apache Kafka 分区重分配的实现原理解析
2022/07/15 Servers