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 相关文章推荐
Flash对联广告的关闭按钮讨论
Jan 30 Javascript
dojo学习第一天 Tab选项卡 实现
Aug 28 Javascript
js转义字符介绍
Nov 05 Javascript
JavaScript实现Java中StringBuffer的方法
Feb 09 Javascript
BootStrap网页中代码显示用法详解
Oct 21 Javascript
玩转NODE.JS(四)-搭建简单的聊天室的代码
Nov 11 Javascript
Javascript计算二维数组重复值示例代码
Dec 18 Javascript
Angularjs 依赖压缩及自定义过滤器写法
Feb 04 Javascript
JS在浏览器中解析Base64编码图像
Feb 09 Javascript
Node.js利用js-xlsx处理Excel文件的方法详解
Jul 05 Javascript
详解AngularJS1.x学习directive 中‘& ’‘=’ ‘@’符号的区别使用
Aug 23 Javascript
JS实现简单控制视频播放倍速的实例代码
Apr 18 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作为Shell脚本语言使用
2006/10/09 PHP
php与mysql建立连接并执行SQL语句的代码
2011/07/04 PHP
兼容PHP和Java的des加密解密代码分享
2014/06/26 PHP
windows的文件系统机制引发的PHP路径爆破问题分析
2014/07/28 PHP
PHP编程中的常见漏洞和代码实例
2014/08/06 PHP
Destoon实现多表查询示例
2014/08/21 PHP
php ucwords() 函数将字符串中每个单词的首字符转换为大写(实现代码)
2016/05/12 PHP
基于jquery.Jcrop的头像编辑器
2010/03/01 Javascript
javascript学习笔记(十二) RegExp类型介绍
2012/06/20 Javascript
Json对象与Json字符串互转(4种转换方式)
2013/03/27 Javascript
获取表单控件原始(初始)值的方法
2013/08/21 Javascript
jQuery操作CheckBox的方法介绍(选中,取消,取值)
2014/02/04 Javascript
jQuery中:image选择器用法实例
2015/01/03 Javascript
javascript制作的简单注册模块表单验证
2015/04/13 Javascript
jQuery对JSON数据进行排序输出的方法
2015/06/24 Javascript
JS实现的简单鼠标跟随DiV层效果完整实例
2015/10/31 Javascript
利用jQuery实现CheckBox全选/全不选/反选的简单代码
2016/05/31 Javascript
AngularJs bootstrap搭载前台框架——准备工作
2016/09/01 Javascript
angular2 ng build部署后base文件路径问题详细解答
2017/07/15 Javascript
什么时候不能在 Node.js 中使用 Lock Files
2019/06/24 Javascript
JS变量提升原理与用法实例浅析
2020/05/22 Javascript
[57:29]Alliance vs KG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/17 DOTA
Pandas之MultiIndex对象的示例详解
2019/06/25 Python
解决windows上安装tensorflow时报错,“DLL load failed: 找不到指定的模块”的问题
2020/05/20 Python
Python基于mediainfo批量重命名图片文件
2020/12/29 Python
CSS去掉A标签(链接)虚线框的方法
2014/04/01 HTML / CSS
美国领先的医疗警报服务:Philips Lifeline
2018/03/12 全球购物
定义一结构体变量,用其表示点坐标,并输入两点坐标,求两点之间的距离
2015/08/17 面试题
DELPHI中如何调用API,可举例说明
2014/01/16 面试题
怎么样写好简历中的自我评价
2013/10/25 职场文书
中学生打架检讨书
2014/02/10 职场文书
销售活动策划方案
2014/08/26 职场文书
2015年个人实习工作总结
2014/12/12 职场文书
三峡人家导游词
2015/01/31 职场文书
2015年公务员转正工作总结
2015/04/24 职场文书
2015年党总支工作总结
2015/05/25 职场文书