Element-ui组件库Table表格导出Excel文件
时间:2020-03-24
本文章向大家介绍Element-ui组件库Table表格导出Excel文件,主要包括Element-ui组件库Table表格导出Excel文件使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
Element-ui组件库Table表格导出Excel文件
1.npm导入包
npm install --save xlsx file-saver
2.给el-table标签添加id
<el-table :data="tableData" border id="out-table" >
3.引用包
// 引入导出Excel表格依赖 import FileSaver from "file-saver"; import XLSX from "xlsx";
4.添加导出按钮
<button @click="exportExcel">点击导出</button>
5.导出方法
//定义导出Excel表格事件 exportExcel() { /* 从表生成工作簿对象 */ let wb = XLSX.utils.table_to_book(document.querySelector('#out-table')) /* 获取二进制字符串作为输出 */ var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' }) try { FileSaver.saveAs( //Blob 对象表示一个不可变、原始数据的类文件对象。 //Blob 表示的不一定是JavaScript原生格式的数据。 //File 接口基于Blob,继承了 blob 的功能并将其扩展使其支持用户系统上的文件。 //返回一个新创建的 Blob 对象,其内容由参数中给定的数组串联组成。 new Blob([wbout], { type: 'application/octet-stream' }), //设置导出文件名称 'sheetjs.xlsx' ) } catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) } return wbout }
参考资料:https://blog.csdn.net/gs981600308/article/details/88997292
原文地址:https://www.cnblogs.com/s313139232/p/12557556.html
- Spring Cloud构建微服务架构:消息驱动的微服务(核心概念)【Dalston版】
- Golang语言社区--【基础知识】循环
- Spring Cloud构建微服务架构:消息驱动的微服务(消费组)【Dalston版】
- Spring Cloud构建微服务架构:消息驱动的微服务(消费分区)【Dalston版】
- Spring Boot中使用LDAP来统一管理用户信息
- 使用Swagger2Markup实现API文档的静态部署(一):AsciiDoc
- 使用Swagger2Markup实现API文档的静态部署(二):Markdown和Confluence
- Dubbo官方的Starter发布1.0.0测试版,与Spring Boot的结合将更加自然
- spring-boot-starter-swagger 1.2.0.RELEASE:新增分组配置功能
- 领域驱动设计
- Spring Boot中使用JavaMailSender发送邮件
- Spring Boot的应用限流
- Spring Cloud构建微服务架构:服务网关(过滤器)【Dalston版】
- 虚拟机类加载机制
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 利用scipy计算定积分
- 关于设计模式的那些事(一)
- 你在小程序中怎么计算两个经纬度的距离?
- 权限-Linux每日一练(5)
- Go 每日一库之 commonregex
- Python编程 基础练习(三)
- Python 图像数组变换及手绘效果实现
- 爬取TIOBE编程语言热度数据 + Pyecharts绘制时间轮播图
- Python 简单实现贪吃蛇小游戏
- Python数据可视化 词云图 绘制词云的方法总结
- Python 利用OpenCV给照片换底色
- Python爬虫实战 批量下载高清美女图片
- Python matplotlib数据可视化 绘制柱形图、堆叠图、折线图、饼图和环图
- Python Matplotlib数据可视化 绘制箱形图、散点图和直方图
- 【Lighthouse教程】scrapy爬虫初探