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禁止页面复制功能禁用页面右键菜单示例代码
Aug 29 Javascript
如何将网页表格内容导入excel
Feb 18 Javascript
jquery实现无限分级横向导航菜单的方法
Mar 12 Javascript
JS实现跟随鼠标的链接文字提示框效果
Aug 06 Javascript
详解Backbone.js框架中的模型Model与其集合collection
May 05 Javascript
BootStrap+Angularjs+NgDialog实现模式对话框
Aug 24 Javascript
原生JS实现左右箭头选择日期实例代码
Mar 14 Javascript
在js代码拼接dom对象到页面上的模板总结
Oct 21 Javascript
three.js实现炫酷的全景3D重力感应
Dec 30 Javascript
vue 中 elment-ui table合并上下两行相同数据单元格
Dec 26 Javascript
javascript canvas API内容整理
Feb 16 Javascript
浅谈鸿蒙 JavaScript GUI 技术栈
Sep 17 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
使用VisualStudio开发php的图文设置方法
2010/08/21 PHP
MongoDB在PHP中的常用操作小结
2014/02/20 PHP
PHP实现采集中国天气网未来7天天气
2014/10/15 PHP
PHP实现搜索地理位置及计算两点地理位置间距离的实例
2016/01/08 PHP
PHP结合Ueditor并修改图片上传路径
2016/10/16 PHP
PHP获取本周所有日期或者最近七天所有日期的方法
2018/06/20 PHP
获得所有表单值的JQuery实现代码[IE暂不支持]
2012/05/24 Javascript
jQuery滚动加载图片效果的实现
2013/03/06 Javascript
jquery中的事件处理详细介绍
2013/06/24 Javascript
AngularJS入门教程之Hello World!
2014/12/06 Javascript
jQuery中even选择器的定义和用法
2014/12/23 Javascript
PHPMyAdmin导入时提示文件大小超出PHP限制的解决方法
2015/03/30 Javascript
基于JS实现移动端访问PC端页面时跳转到对应的移动端网页
2020/12/24 Javascript
用JS实现图片轮播效果代码(一)
2016/06/26 Javascript
BootStrap初学者对弹出框和进度条的使用感觉
2016/06/27 Javascript
基于bootstrap的文件上传控件bootstrap fileinput
2016/12/23 Javascript
Node.js简单入门前传
2017/08/21 Javascript
使用live-server快速搭建本地服务器+自动刷新的方法
2018/03/09 Javascript
vue2.0页面前进刷新回退不刷新的实现方法
2018/07/31 Javascript
node省市区三级数据性能测评实例分析
2019/11/06 Javascript
Python实现的检测web服务器健康状况的小程序
2014/09/17 Python
python实现简单温度转换的方法
2015/03/13 Python
用Python从零实现贝叶斯分类器的机器学习的教程
2015/03/31 Python
python获取当前日期和时间的方法
2015/04/30 Python
解决python大批量读写.doc文件的问题
2018/05/08 Python
阿里云ECS服务器部署django的方法
2019/08/29 Python
英国最大的在线时尚眼镜店:Eyewearbrands
2019/03/12 全球购物
《蜗牛的奖杯》教后反思
2014/04/24 职场文书
后勤管理员岗位职责
2014/08/27 职场文书
财务工作个人总结
2015/02/27 职场文书
2015年学生会纪检部工作总结
2015/03/31 职场文书
起诉状范本
2015/05/20 职场文书
python实现简单区块链结构
2021/04/25 Python
python人工智能human learn绘图可创建机器学习模型
2021/11/23 Python
MongoDB数据库之添删改查
2022/04/26 MongoDB
Python可视化神器pyecharts之绘制地理图表练习
2022/07/07 Python