vue导出Excel(一)
引入工具库,下面代码是demo
cnpm install -S file-saver xlsx
cnpm install -D script-loader
<template><div><el-button type="primary" @click="exportExcel">导出文件</el-button><el-table :data="tableData" style="width: 100%" id="out-table"><el-table-column prop="name" label="姓名" width="180"></el-table-column><el-table-column prop="age" label="年龄" width="80"></el-table-column><el-table-column prop="date" label="日期"></el-table-column></el-table></div>
</template><script>
//引入安装的依赖
import FileSaver from "file-saver";
import XLSX from "xlsx";
export default {name: "export",data() {return {tableData: [{name: "张三",age: 22,date: "2016-05-02",},{name: "王小虎",age: 23,date: "2016-05-04",},],};},methods: {// XLSX.uitls.table_to_book( 放入的是table 的DOM 节点 ) ,sheetjs.xlsx 即为导出表格的名字,可修改!exportExcel() {let wb = XLSX.utils.table_to_book(document.querySelector("#out-table"));let wbout = XLSX.write(wb, {bookType: "xlsx",bookSST: true,type: "array",});FileSaver.saveAs(new Blob([wbout], { type: "application/octet-stream" }),"用户列表.xlsx");return wbout;},},
};
</script><style scoped>
</style>
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 ...
最新文章
- iOS 关于Blocks
- mysql的or能去重吗_mysql条件查询中AND与OR联合使用的注意事项!
- Flink SQL Client读Kafka+流计算(DDL方式+代碼嵌入DDL/SQL方式)
- 如何在SAP云平台的Cloud Foundry环境下添加新的Service(服务)
- 5G/NR 学习笔记:波束赋形 / beam 管理
- 微信分享接口 略缩图 php
- php新手自学手册,PHP完全自学手册(文档教程)
- Ubuntu下,远程访问服务器,路径只显示最后打开的文件夹问题
- (附源码)spring boot企业合同管理系统 毕业设计 161456
- 怎么把epub转换成txt文本
- 解决oracle出现the account is locked问题以及出现not logged on
- 计算机720p进制,历史频道《人类大历史 Big History》第1季全17集 英语中字 720P高清纪录片...
- 一种设计软件界面的万能HTML标签
- 华为nova青春版是html手机吗,华为Nova青春版这款手机作为新青年良品:麒麟935+4G+64GB+18W快充...
- 百度贴吧五年内流失九成用户;罗永浩吐槽苹果新品:更丑更贵更胡来;进互联网大厂毕业生5年后7成人离开 | EA周报...
- wxpython pyqt_pyqt5教程-教程,PyQt5
- QQ浏览器是如何提升搜索相关性的?
- spark on yarn falling back to uploading libraries under SPARK_HOME.
- 关于显示器显示输入信号超出范围,请调整为1600x900@60hz解决办法
- 2020年王鼎杯反序列化题目复现
热门文章
- WCF Service 配置文件注释(转)
- 基于css和js的轮播效果图实现
- javascript:history.go(-1)和javascript:history.back(-1)
- adapter 适配器
- 详细讲解C++ 类的继承
- C++中公有继承、保护继承、私有继承
- R7-11 h0096. 单词合并 (10 分)
- 7-166 二分法求多项式单根 (20 分)
- 7-19 谁先倒 (15 分)
- windows 搭建kms服务器激活_windows下搭建MQTT服务器