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 相关文章推荐
jquery tools之tabs 选项卡/页签
Jul 25 Javascript
JS 非图片动态loading效果实现代码
Apr 09 Javascript
自定义一个jquery插件[鼠标悬浮时候 出现说明label]
Jun 27 Javascript
jquery清空textarea等输入框实现代码
Apr 22 Javascript
本人自用的global.js库源码分享
Feb 28 Javascript
JavaScript定时器和优化的取消定时器方法
Jul 03 Javascript
JS使用onerror捕获异常示例
Aug 03 Javascript
vue2.0数据双向绑定与表单bootstrap+vue组件
Feb 27 Javascript
如何使用Bootstrap创建表单
Mar 29 Javascript
分享5个好用的javascript文件上传插件
Sep 16 Javascript
如何使用CSS3和JQuery easing 插件制作绚丽菜单
Jun 18 jQuery
JavaScript实现多层颜色选项卡嵌套
Sep 21 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实现utf-8转unicode函数分享
2015/01/06 PHP
Yii2框架实现数据库常用操作总结
2017/02/08 PHP
php实现数据库的增删改查
2017/02/26 PHP
通过php动态传数据到highcharts
2017/04/05 PHP
prototype 1.5 & scriptaculous 1.6.1 学习笔记
2006/09/07 Javascript
javascript制作sql转换为stringBuffer的小工具
2015/04/03 Javascript
Javascript控制div属性动态变化实例分析
2015/10/08 Javascript
jquery+ajax实现直接提交表单实例分析
2016/06/17 Javascript
使用JQuery中的trim()方法去掉前后空格
2016/09/16 Javascript
JS前端加密算法示例
2016/12/22 Javascript
简单谈谈原生js的math对象
2017/06/27 Javascript
简单实现js轮播图效果
2017/07/14 Javascript
浅谈如何使用 webpack 优化资源
2017/10/20 Javascript
JavaScript捕捉事件和阻止冒泡事件实例分析
2018/08/03 Javascript
从0到1搭建Element的后台框架的方法步骤
2019/04/10 Javascript
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
2019/07/10 jQuery
vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作
2020/08/28 Javascript
python中self原理实例分析
2015/04/30 Python
python写入xml文件的方法
2015/05/08 Python
在Django的视图(View)外使用Session的方法
2015/07/23 Python
python中logging包的使用总结
2018/02/28 Python
使用Python实现微信提醒备忘录功能
2018/12/04 Python
python 并发编程 多路复用IO模型详解
2019/08/20 Python
python实现12306登录并保存cookie的方法示例
2019/12/17 Python
Python日志:自定义输出字段 json格式输出方式
2020/04/27 Python
python下对hsv颜色空间进行量化操作
2020/06/04 Python
如何将Pycharm中调整字体大小的方式设置为"ctrl+鼠标滚轮上下滑"
2020/11/17 Python
css3 伪类选择器快速复习小结
2019/09/10 HTML / CSS
集世界奢侈品和设计师品牌的意大利精品买手店:Tessabit
2019/08/17 全球购物
六月份红领巾广播稿
2014/02/03 职场文书
大三学习计划书范文
2014/05/02 职场文书
弘扬民族精神演讲稿
2014/05/07 职场文书
本科毕业生自荐信
2014/05/26 职场文书
以幸福为主题的活动方案
2014/08/22 职场文书
Win11跳过联网界面创建本地管理账户的3种方法
2022/04/20 数码科技
MySQL存储过程及语法详解
2022/08/05 MySQL