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 相关文章推荐
js判断浏览器是否支持html5
Aug 17 Javascript
jquery中val()方法是从最后一个选项往前读取的
Sep 06 Javascript
浅析JavaScript中的变量复制、参数传递和作用域链
Jan 13 Javascript
vue子父组件通信的实现代码
Jul 09 Javascript
JS库之wow.js使用方法
Sep 14 Javascript
vuejs项目打包之后的首屏加载优化及打包之后出现的问题
Apr 01 Javascript
Vue动态路由缓存不相互影响的解决办法
Feb 19 Javascript
微信小程序实现蓝牙打印
Sep 23 Javascript
JavaScript的console命令使用实例
Dec 03 Javascript
原生js实现点击轮播切换图片
Feb 11 Javascript
原生JS实现萤火虫效果
Mar 07 Javascript
使用refresh_token实现无感刷新页面
Apr 26 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下打开URL地址的几种方法小结
2010/05/16 PHP
PHPUnit PHP测试框架安装方法
2011/03/23 PHP
PHP实现查询两个数组中不同元素的方法
2016/02/23 PHP
URI、URL和URN之间的区别与联系
2006/12/20 Javascript
js中prototype用法详细介绍
2013/11/14 Javascript
js获得当前时区夏令时发生和终止的时间代码
2014/02/23 Javascript
网页实时显示服务器时间和javscript自运行时钟
2014/06/09 Javascript
jQuery DOM删除节点操作指南
2015/03/03 Javascript
JavaScript改变CSS样式的方法汇总
2015/05/07 Javascript
JavaScript中模拟实现jsonp
2015/06/19 Javascript
基于jQuery实现的仿百度首页滑动选项卡效果代码
2015/11/16 Javascript
最简单的JavaScript图片轮播代码(两种方法)
2015/12/18 Javascript
浅谈JavaScript前端开发的MVC结构与MVVM结构
2016/06/03 Javascript
jQuery控制控件文本的长度的操作方法
2016/12/05 Javascript
分分钟玩转Vue.js组件(二)
2017/03/01 Javascript
nodejs根据ip数组在百度地图中进行定位
2017/03/06 NodeJs
JS实现的计数排序与基数排序算法示例
2017/12/04 Javascript
JS实现多物体运动的方法详解
2018/01/23 Javascript
Mac下安装vue
2018/04/11 Javascript
如何把vuejs打包出来的文件整合到springboot里
2018/07/26 Javascript
微信小程序 调用微信授权窗口相关问题解决
2019/07/25 Javascript
Vue elementui字体图标显示问题解决方案
2020/08/18 Javascript
解决vue 使用axios.all()方法发起多个请求控制台报错的问题
2020/11/09 Javascript
Python实现简单状态框架的方法
2015/03/19 Python
python通过ssh-powershell监控windows的方法
2015/06/02 Python
Flask核心机制之上下文源码剖析
2018/12/25 Python
python PyQt5/Pyside2 按钮右击菜单实例代码
2019/08/17 Python
docker-py 用Python调用Docker接口的方法
2019/08/30 Python
如何基于Python Matplotlib实现网格动画
2020/07/20 Python
iframe跨域的几种常用方法
2019/11/11 HTML / CSS
全球领先的各类汽车配件零售商:Advance Auto Parts
2016/08/26 全球购物
美体小铺奥地利官方网站:The Body Shop奥地利
2019/04/11 全球购物
Delphi笔试题
2016/11/14 面试题
前台文员我鉴定
2014/01/12 职场文书
警察群众路线对照检查材料思想汇报
2014/10/01 职场文书
董事长致辞
2015/07/29 职场文书