vue 导出excel
用xlsx插件
1、安装依赖包
npm install xlsx
npm install file-saver
2、创建一个commom.js文件
import * as XLSX from "xlsx";
import FileSaver from 'file-saver'export default {/*** 导出* @param mainTitle 主标题* @param subTitle 副标题* @param reqData* @returns {any}*/exportTable(mainTitle,subTitle,reqData){/* generate workbook object from table */var timeTitle = this.getDate();// if(reqData.beginTime&&reqData.endTime){// timeTitle = "-"+reqData.beginTime+"-"+reqData.endTime;// } // 判断有没有时间if(subTitle){subTitle='-'+subTitle}else{subTitle = '';}let sheetjs=mainTitle+subTitle+timeTitle;let xlsxParam = { raw: true }var wb = XLSX.utils.table_to_book(document.querySelector('#outTable'),xlsxParam)/* 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},/*** 创建当前时间* */getDate(){var date = new Date(),year = date.getFullYear(),month = date.getMonth() + 1,day = date.getDate(),hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(),minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(),second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();month >= 1 && month <= 9 ? (month = "0" + month) : "";day >= 0 && day <= 9 ? (day = "0" + day) : "";// var timer = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;var timer = year + '-' + month + '-' + day;return timer;},
}
3、在表格上加上id
<el-table id='outTable'></el-table>
4、在页面引入方法
import comon from "@/api/commom";
5、在按钮上添加click方法
exportExcel () {comon.exportTable(this.title,'','')
},
就可以实现导出了
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 ...
最新文章
- 在移动安全领域,人工智能未来该扮演怎样的角色?
- 还在用Jenkins?看看这些替代方案,是否更适合你!
- 关于mysql数据库中存放中文字段乱码问题解决方案
- ucos 消息队列代码详解_用python实现 多进程队的列数据处理详解,零基础记得都收藏哦
- 休眠 关闭串口输出_C#实例:串口通讯
- oracle遇到无效lob,sql – ORA-22275错误:指定了无效的LOB定位符
- 宿迁学计算机的学校,宿迁计算机学校
- 基于图神经网络的图表示学习方法
- appium 处理滑动的方法
- [Laravel]配置路由小记
- Endnote在word中每次启动都要加载,或者无法加载的解决办法
- XML案例——Jsoup网页爬虫 XML配置参数
- 阿里巴巴矢量图标库的使用
- 树莓派c语言小车红外,基于树莓派的红外避障小车
- c600 raid linux,华硕Z9PA-D8 (-C600 INTEL RAID)主板驱动3.8.0.1108版下载,适用于Win8-64,win7,Win7-64,winxp-驱动精灵...
- java中的约瑟夫问题_java实现约瑟夫问题
- oppo enco free2 固件降级工具 (仅供测试使用)
- idea为什么不显示运行按钮_idea 右键项目没有run 运行选项
- 基于vegan包对otu表抽平——r语言
- ESP32基于arduino开发的心跳体温检测系统(四)本地端系统整合