element ui table 导出excel表格
https://blog.csdn.net/u010427666/article/details/79208145
vue2.0 + element UI 中 el-table 数据导出Excel
1、 安装相关依赖
主要是两个依赖
npm install --save xlsx file-saver
1
如果想详细看着两个插件使用,请移步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 的方法即可 。
element ui table 导出excel表格的更多相关文章
- ASP如何将table导出EXCEL表格
网页导出excel表格非常常用,对于一些加载<table>的数据网页,经常会用到这种功能,下面和大家分享一下ASP如何导出EXCEL表格 工具/原料 ASP编辑器 方法/步骤 ...
- Vue+element ui table 导出到excel
需求: Vue+element UI table下的根据搜索条件导出当前所有数据 参考: https://blog.csdn.net/u010427666/article/details/792081 ...
- vue+element UI如何导出excel表
导出excel表应按如下规则 首先要先安装如下依赖 npm install --save xlsx npm install --save file-saver 接下在在你的代码中去引用这两个 impo ...
- vue2.5 + element UI el-table 导出Excel
安装依赖 npm install --save xlsx file-saver 新建excelHelper.js \src\utils\目录下新建excelHelper.js文件 import Vue ...
- 原生JavaScript 导出excel表格(兼容ie和其他主流浏览器)
因同事的需求是想前端导出excel表格,网上找了一些demo,自己修改了一下,可能以后会用到,记录下来吧,兼容ie和一些主流浏览器,ie可能会报错,原因参考 这里,edge 浏览器还没有办法导出,正在 ...
- html table表格导出excel的方法 html5 table导出Excel HTML用JS导出Excel的五种方法 html中table导出Excel 前端开发 将table内容导出到excel HTML table导出到Excel中的解决办法 js实现table导出Excel,保留table样式
先上代码 <script type="text/javascript" language="javascript"> var idTmr; ...
- Element-ui组件库Table表格导出Excel表格
安装npm install --save xlsx file-saver 两个插件的详细地址在下面 https://github.com/SheetJS/js-xlsxhttps://github.c ...
- .NET环境下导出Excel表格的两种方式和导入两种类型的Excel表格
一.导出Excel表格的两种方式,其中两种方式指的是导出XML数据类型的Excel(即保存的时候可以只需要修改扩展名为.xls)和真正的Excel这两种. using System; using Sy ...
- js导出Excel表格
js导出Excel表格 直接上代码: 红色部分:如果表格数据中有“1/1”这样的值,会在导出的Excel中转化为日期“1月1日”,所以才加上了红色那两句.如果返回值中没有这样的格式,红色部分可以不写. ...
随机推荐
- php实现多域名共享session会话
php会话机制参考:我的随笔 缘起 网站,通常会有多个服务器,多个子域名,每个节点运行着不同模块.有时为了整体体验,用户用同一个用户名.密码浏览整站,不用重复登录.这时候就需要多服务器共享sessio ...
- fs项目---->migrate-mongo的使用(一)
tw项目中用的是mongo数据库,数据的迁移也是需求的一部分.这时我们可以使用migrate-mongo在nodejs中方便的进行数据的迁移,以下记录一下使用的过程. 一.migrate-mongo的 ...
- 腾讯云Badjs镜像使用入门
版权声明:本文由王少飞 原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/498929001487125840 来源:腾云阁 ...
- H5网页适配 iPhoneX,就是这么简单(转)
iPhoneX 取消了物理按键,改成底部小黑条,这一改动导致网页出现了比较尴尬的屏幕适配问题.对于网页而言,顶部(刘海部位)的适配问题浏览器已经做了处理,所以我们只需要关注底部与小黑条的适配问题即可( ...
- 剖析Elasticsearch集群系列之二:分布式的三个C、translog和Lucene段
转载:http://www.infoq.com/cn/articles/anatomy-of-an-elasticsearch-cluster-part02 共识——裂脑问题及法定票数的重要性 共识是 ...
- 如何把py文件打包成exe可执行文件
如何把py文件打包成exe可执行文件 1.安装 pip install pyinstaller 或者 pip install -i https://pypi.douban.com/simple pyi ...
- 洛谷P1074 靶形数独【dfs】【剪枝】
题目:https://www.luogu.org/problemnew/show/P1074 题意: 数独的分数如下.一个数独的总分数就是权值乘所填数字之和. 现在给一个未完成的数独,问分数最高的数独 ...
- 【每日一题】Squares UVA - 201 暴力+输出坑 + 读文件模板
题意 给你n*n的图,让你数正方形 题解:暴力for每个点,对于每个点从它出发顺时针走一个正方形.走完就ans[i]++; 坑:多输了一行******,然后在那里手摸样例,无限debug orz #d ...
- C常用的字符串函数实现
/** 查找字符串 source 中 是否有指定的子串出现,如果有返回第一个匹配的字符 @param source 源 @param chars 目标 @return 返回值 */ char *fin ...
- ASP.NET MVC 计划任务(不使用外接程序,.net内部机制实现)
在asp.net中要不使用其他插件的情况下只能使用定时器来检查, 并执行任务. 以下讲解步骤: 1. 在Global.asax 文件中作如下修改 1 2 3 4 5 6 7 8 9 10 11 voi ...