vue 导出Excel
原博主地址 https://blog.csdn.net/u010427666/article/details/79208145
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 的方法即可 。
组件里头代码截图:
代码如下:
// 数据导出 两个引用
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
//导出数据
methods: {
//导出数据
exportExcel () {
/* generate workbook object from table */
var wb = XLSX.utils.table_to_book(document.querySelector('#out-table')) //out-tabl是在table里面设置的id(id = "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' }), '数据导出.xlsx')
} catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }
return wbout
},
}
vue 导出Excel相关推荐
- vue导出excel加一个进度条_vue导出excel遇到的问题解决方法
本篇文章给大家带来的内容是关于vue导出excel遇到的问题解决方法,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 需求: Vue+element UI el-table下的导出当前 ...
- (vue)vue导出excel文件打不开,或者文件内容为object object
(vue)vue导出excel文件打不开,或者文件内容为object object[已解决] bug: 主要原因:没有注意到后端返回的数据格式,需要的是res而不是res.data 正确写法: < ...
- vue导出excel功能实现
vue导出excel功能实现 第一步安装依赖包 第二步在项目中assets创建一个新的文件夹js用于存放Blob和Export2Excel两个js文件 第三步在你那个组件中使用 写事件方法 Expor ...
- 封装vue导出excel组件(扩展嵌入图片、操作工作表、表格样式等功能)
导出的excel中嵌入图片,同时还需要操作多个工作表与表格样式, 看了一些java的插件不太适合,因为我这边的需求是动态表单,字段不固定.后端的插件大部分依赖实体类注解,要不就是操作比较繁琐.又看了一 ...
- vue导出excel表的时候有多张图片
vue导出excel的时候多张图片 遇到数据结构是[ { id:id, image:['图片','图片','图片'] } ] 这样的数据导出,使用插件 js-table2excel 导出的时候发现它只 ...
- vue导出Excel表格全局函数(简洁明了)
vue导出excel全局函数(简洁明了) 将导出到Excel功能封装成一个公用js函数,供其他vue页面复用. 1.安装Excel插件 npm install --save xlsx file-sav ...
- 【vue开发】vue导出Excel表格教程demo
前端工作量最多的就是需求,需求就是一直在变,比如当前端数据写完之后,需要用Excel把数据下载出来:再比如前端在没有数据库想写些demo玩时,也是很好的选择. 第一步安装依赖包,修改配置 1.装依赖: ...
- vue导出excel加一个进度条_vue 实现excel导出功能
最近Vue项目中用到了导出功能,在网上搜索了一番之后,决定采用Blob方式,这也是大家推荐的一种的方式,特此做下记录. 导出Excel功能 我是使用vue-cli3.0的框架,所以在安装过程中没有遇到 ...
- vue导出excel加一个进度条_Vue实现在前端导出Excel
安装依赖 进入项目文件夹,打开cmd或者在Webstorm中的Terminal中输入: npm install -S file-saver xlsx npm install -D script-loa ...
- vue导出excel加一个进度条_vue 实现Excel 导入导出功能
第一步:安装依赖 使用npm: npm install -S file-saver xlsx(这里其实安装了2个依赖) npm install -D script-loader 或使用yarn: ya ...
最新文章
- 为什么vue.js一眼看上去很美?
- jquery 手型 鼠标穿过时_专业电竞鼠标有什么独到之处?看完核技瑞你就知道了
- HTML基础,块级元素/行内元素/行内块元素辨析【2分钟掌握】
- prometheus接入mysqld_exporter
- java 字符串 常量_Java进阶——Java中的字符串常量池
- 汇编的一些坑以及部分上机题目的实现
- 反解析Navicat ncx加密后的密码(并导入到dbeaver)
- 同样可以建站,云服务器和虚拟主机的区别在哪?
- linux buffer cache 过高_你真的理解Linux的内存监控吗?
- android内存泄露_Java应用程序中的内存泄漏及内存管理
- 华为交换机开启web管理
- ofdm导频信道估计matlab,基于导频的OFDM系统信道估计
- css中设置字体下划线,css如何设置字体下划线
- 解决后台传入的大于js最大数值精度的问题
- aras innovator: 分类筛选如何做?
- 计算机网络 王道考研2021 第六章:应用层 -- 域名系统 DNS、域名解析
- 软件工程网络15个人作业3——案例分析(201521123107)
- ccproxy受瑞星杀毒软件影响
- 【小技巧】STA静态时序分析概述
- 计算机图形剪裁程序说明,计算机图形学实验报告实验2裁剪算法实验
热门文章
- 彻底理解position与anchorPoint - Wonderffee's Blog(转)
- 深入分析linux内核源码
- ResourceBundle和Properties(转载)
- 开发项目的简单流程(需求、数据库、编码)
- Gadget,又见Gadget - 浅尝Windows Live Contacts Gadget
- Bailian2685 打印水仙花数【进制+宏定义】
- UVA983 Localized Summing for Blurring【前缀和+最大子段和+DP】
- Bailian3718 位操作练习【位运算】
- CCF201403-3 命令行选项(100分)
- LaTeX indicator function(指示函数)(\mathbb {1} 不起作用)