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 相关文章推荐
jQuery 类twitter的文本字数限制带提示效果插件
Apr 16 Javascript
基于jquery的地址栏射击游戏代码
Mar 10 Javascript
现代 JavaScript 开发编程风格Idiomatic.js指南中文版
May 28 Javascript
jquery 插件实现瀑布流图片展示实例
Apr 03 Javascript
JS导出PDF插件的方法(支持中文、图片使用路径)
Jul 12 Javascript
javascript中数组和字符串的方法对比
Jul 20 Javascript
Vue如何引入远程JS文件
Apr 20 Javascript
webpack学习笔记之代码分割和按需加载的实例详解
Jul 20 Javascript
JS监控关闭浏览器操作的实例详解
Sep 12 Javascript
vue接入腾讯防水墙代码
May 07 Javascript
Vue实现Layui的集成方法步骤
Apr 10 Javascript
JS运算符优先级与表达式示例详解
Sep 04 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生成唯一订单号
2015/07/05 PHP
php array_pop 删除数组最后一个元素实例
2016/11/02 PHP
基于jquery的一个简单的脚本验证插件
2010/04/05 Javascript
使用jquery实现select添加实现后台权限添加的效果
2011/05/28 Javascript
jQuery EasyUI API 中文文档 - ComboBox组合框
2011/10/07 Javascript
script的async属性以非阻塞的模式加载脚本
2013/01/15 Javascript
node.js中的fs.createReadStream方法使用说明
2014/12/17 Javascript
jquery实现表格隔行换色效果
2015/11/19 Javascript
JS实现移动端实时监听输入框变化的实例代码
2017/04/12 Javascript
JS 验证密码 不能为空,必须含有数字、字母、特殊字符,长度在8-12位
2017/06/21 Javascript
node实现基于token的身份验证
2018/04/09 Javascript
详解使用Next.js构建服务端渲染应用
2018/07/10 Javascript
jQuery AJAX 方法success()后台传来的4种数据详解
2018/08/08 jQuery
如何使用 JavaScript 操作浏览器历史记录 API
2020/11/24 Javascript
python实现本地批量ping多个IP的方法示例
2019/08/07 Python
python实现两个文件夹的同步
2019/08/29 Python
浅谈pycharm导入pandas包遇到的问题及解决
2020/06/01 Python
Python pathlib模块使用方法及实例解析
2020/10/05 Python
会走动的图形html5时钟示例
2014/04/27 HTML / CSS
基于HTML5 的人脸识别活体认证的实现方法
2016/06/22 HTML / CSS
Under Armour西班牙官网:美国知名的高端功能性运动品牌
2018/12/12 全球购物
俄罗斯设计师家具购物网站:The Furnish
2019/12/01 全球购物
Ibatis的核心配置文件都有什么
2014/09/08 面试题
Java提供了哪些企业应用编程接口
2015/02/13 面试题
学年末自我鉴定
2014/01/21 职场文书
宾馆总经理岗位职责
2014/02/14 职场文书
小学生常见病防治方案
2014/06/06 职场文书
实训报告范文大全
2014/11/04 职场文书
2015应届毕业生自荐信范文
2015/03/05 职场文书
博士生专家推荐信
2015/03/25 职场文书
2015员工年度考核评语
2015/03/25 职场文书
2015年三好一满意工作总结
2015/07/24 职场文书
一年级语文教学随笔
2015/08/14 职场文书
告诉你创业计划书的8个实用技巧
2019/07/12 职场文书
MySQL sql_mode修改不生效的原因及解决
2021/05/07 MySQL
VW、VH适配移动端的解决方案与常见问题
2023/05/21 HTML / CSS