vue2.0 + element UI 中 el-table 数据导出Excel的方法


Posted in Javascript onMarch 02, 2018

1、安装相关依赖

主要是两个依赖

npm install --save xlsx file-saver

如果想详细看着两个插件使用,请移步github。

https://github.com/SheetJS/js-xlsx

https://github.com/eligrey/FileSaver.js

2、组件里头引入

import FileSaver from 'file-saver'
import XLSX from 'xlsx'

3、组件methods里写一个方法

exportExcel () {
 /* generate workbook object from table */
 var wb = XLSX.utils.table_to_book(document.querySelector('#out-table'))
 /* get binary string as output */
 var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
 try {
  FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), 'sheetjs.xlsx')
 } catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }
 return wbout
},

注意:XLSX.uitls.table_to_book( 放入的是table 的DOM 节点 ) ,sheetjs.xlsx 即为导出表格的名字,可修改!

4、点击导出按钮执行 exportExcel 的方法即可 。

组件里头代码截图:

vue2.0 + element UI 中 el-table 数据导出Excel的方法

实现效果图如下:

导出如下表格的数据到excel。

vue2.0 + element UI 中 el-table 数据导出Excel的方法

导出到excel 表格,结果如下:

vue2.0 + element UI 中 el-table 数据导出Excel的方法

相关链接:

该工具的其他使用场景( 如react 、jQ、angular ) http://sheetjs.com/

以上这篇vue2.0 + element UI 中 el-table 数据导出Excel的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
如何使用Javascript正则表达式来格式化XML内容
Jul 04 Javascript
javascript实现锁定网页、密码解锁效果(类似系统屏幕保护效果)
Aug 15 Javascript
node.js开发中使用Node Supervisor实现监测文件修改并自动重启应用
Nov 04 Javascript
jQuery中replaceAll()方法用法实例
Jan 16 Javascript
JavaScript获取表单内所有元素值的方法
Apr 02 Javascript
jQuery实现提示密码强度的代码
Jul 15 Javascript
node.js下LDAP查询实例分享
Sep 30 Javascript
js验证身份证号有效性并提示对应信息
Oct 19 Javascript
jQuery为DOM动态追加事件的方法
Feb 16 Javascript
vue实现简单表格组件实例详解
Apr 16 Javascript
webpack实现热更新(实施同步刷新)
Jul 28 Javascript
利用three.js画一个3D立体的正方体示例代码
Nov 19 Javascript
浅谈FastClick 填坑及源码解析
Mar 02 #Javascript
利用vue和element-ui设置表格内容分页的实例
Mar 02 #Javascript
vue将时间戳转换成自定义时间格式的方法
Mar 02 #Javascript
Element-ui table中过滤条件变更表格内容的方法
Mar 02 #Javascript
使用vue-aplayer插件时出现的问题的解决
Mar 02 #Javascript
VUE2.0+Element-UI+Echarts封装的组件实例
Mar 02 #Javascript
vue中添加mp3音频文件的方法
Mar 02 #Javascript
You might like
PHP学习之PHP表达式
2006/10/09 PHP
用PHP实现维护文件代码
2007/06/14 PHP
Yii2.0使用阿里云OSS的SDK上传图片、下载、删除图片示例
2017/09/20 PHP
PHP封装的数据库模型Model类完整示例【基于PDO】
2019/03/14 PHP
PHP defined()函数的使用图文详解
2019/07/20 PHP
Yii框架核心组件类实例详解
2019/08/06 PHP
JS DOM 操作实现代码
2010/08/01 Javascript
Javascript技巧之不要用for in语句对数组进行遍历
2010/10/20 Javascript
VBS通过WMI监视注册表变动的代码
2011/10/27 Javascript
js选取多个或单个元素的实现代码(用class)
2012/08/22 Javascript
js常用系统函数用法实例分析
2015/01/12 Javascript
JavaScript实现非常简单实用的下拉菜单效果
2015/08/27 Javascript
使用JS中的exec()方法构造正则表达式验证
2016/08/01 Javascript
利用Vue.js实现求职在线之职位查询功能
2017/07/03 Javascript
node.js express中app.param的用法详解
2017/07/16 Javascript
Angularjs中数据绑定的实例详解
2017/08/25 Javascript
浅谈vue+webpack项目调试方法步骤
2017/09/11 Javascript
基于dataset的使用和图片延时加载的实现方法
2017/12/11 Javascript
详解webpack4之splitchunksPlugin代码包分拆
2018/12/04 Javascript
解决vue初始化项目时,一直卡在Project description上的问题
2019/10/31 Javascript
vue vantUI tab切换时 list组件不触发load事件的问题及解决方法
2020/02/14 Javascript
你眼中的Python大牛 应该都有这份书单
2017/10/31 Python
在Tensorflow中查看权重的实现
2020/01/24 Python
windows下的pycharm安装及其设置中文菜单
2020/04/23 Python
Python替换NumPy数组中大于某个值的所有元素实例
2020/06/08 Python
巴西最大的巴士票务门户:Quero Passagem
2020/11/21 全球购物
linux面试题参考答案(5)
2016/11/05 面试题
法院先进个人事迹材料
2014/05/04 职场文书
企业仓管员岗位职责
2014/06/15 职场文书
世博会口号
2014/06/20 职场文书
2014年政风行风工作总结
2014/11/22 职场文书
pytorch中的numel函数用法说明
2021/05/13 Python
python实现A*寻路算法
2021/06/13 Python
SpringBoot集成Redis,并自定义对象序列化操作
2021/06/22 Java/Android
JavaScript实现简单拖拽效果
2021/09/15 Javascript
浅谈MySql整型索引和字符串索引失效或隐式转换问题
2021/11/20 MySQL