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 文字符串转换unicode编码函数
May 30 Javascript
菜鸟javascript基础资料整理3 正则
Dec 06 Javascript
浅谈JavaScript数据类型及转换
Feb 28 Javascript
JavaScript获取网页表单action属性的方法
Apr 02 Javascript
javascript判断并获取注册表中可信任站点的方法
Jun 01 Javascript
jQuery Ajax 上传文件处理方式介绍(推荐)
Jun 30 Javascript
使用JS中的exec()方法构造正则表达式验证
Aug 01 Javascript
js 上传文件预览的简单实例
Aug 16 Javascript
js手机号批量滚动抽奖实现代码
Apr 17 Javascript
mpvue中使用flyjs全局拦截的实现代码
Sep 13 Javascript
详解关于html,css,js三者的加载顺序问题
Apr 10 Javascript
vue element-ui中table合计指定列求和实例
Nov 02 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 数组实例说明
2008/08/18 PHP
PHP sprintf()函数用例解析
2011/05/18 PHP
PHP CURL获取返回值的方法
2014/05/04 PHP
php面向对象程序设计中self与static的区别分析
2019/05/21 PHP
document.createElement()用法及注意事项(ff下不兼容)
2013/03/13 Javascript
浅谈js中的闭包
2015/03/16 Javascript
百度地图api如何使用
2015/08/03 Javascript
jQuery form插件之formDdata参数校验表单及验证后提交
2016/01/23 Javascript
js实现StringBuffer的简单实例
2016/09/02 Javascript
js实现背景图自适应窗口大小
2017/01/10 Javascript
javascript 网页进度条简单实例
2017/02/22 Javascript
原生JS+Canvas实现五子棋游戏实例
2017/06/19 Javascript
JS库之Three.js 简易入门教程(详解之一)
2017/09/13 Javascript
JS实现数组去重,显示重复元素及个数的方法示例
2019/01/21 Javascript
Vue 使用formData方式向后台发送数据的实现
2019/04/14 Javascript
jQuery动态生成的元素绑定事件操作实例分析
2019/05/04 jQuery
layui 表格操作列按钮动态显示的实现方法
2019/09/06 Javascript
js+canvas实现两张图片合并成一张图片的方法
2019/11/01 Javascript
微信小程序wxs实现吸顶效果
2020/01/08 Javascript
原生js实现ajax请求和JSONP跨域请求操作示例
2020/03/14 Javascript
JS实现炫酷轮播图
2020/11/15 Javascript
[00:33]2016完美“圣”典风云人物:Sccc宣传片
2016/12/03 DOTA
Python的Urllib库的基本使用教程
2015/04/30 Python
Python实现的FTP通信客户端与服务器端功能示例
2018/03/28 Python
python 统计列表中不同元素的数量方法
2018/06/29 Python
使用django的objects.filter()方法匹配多个关键字的方法
2019/07/18 Python
Python 实现二叉查找树的示例代码
2020/12/21 Python
使用canvas绘制超炫时钟
2014/12/17 HTML / CSS
html5.2 dialog简介详解
2018/02/27 HTML / CSS
Columbia美国官网:美国著名的户外服装品牌
2016/11/24 全球购物
乐观自信演讲稿范文
2014/05/21 职场文书
小学校本培训方案
2014/06/06 职场文书
2014年人事工作总结范文
2014/11/19 职场文书
房屋租房协议书范本
2014/12/04 职场文书
司机个人年终总结
2015/03/03 职场文书
法人代表证明书范本
2015/06/18 职场文书