记录vue和element-ui导出表格到excell
1.安装插件
npm install 'file-saver'
npm install 'xlsx'
2.引入插件
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
3.定义方法
exportForms(){
let xlsxParam = {raw:true};
let wb = XLSX.utils.table_to_book(document.querySelector("#outTable"),xlsxParam);
//outtable是表格对应的id
let wbout = XLSX.write(wb,{
bookType:"xlsx",
bookSST:true,
type:"array"
})
try{
FileSaver.saveAs(
new Blob([wbout],{type:"application/octet-stream;charset=utf-8"}),
"数据详情.xlsx" //导出的文件名称
)
}catch (e) {
if(typeof console !== "undefined"){
console.log(e,wbout)
}
}
return wbout;
}
提示!!
如果进行了分页只能导出第一页的数据
如果要导出所有的数据,需要单独写一个表,然后display:none导出这个所有数据的表就可以,亲测有效
记录vue和element-ui导出表格到excell的更多相关文章
- element ui设置表格表头高度和每一行的高度
填坑记录:今天用element ui的表格组件做用户信息展示,直接拉取的官网的代码过来,发现表头和每一行都太高了,如下: 因为第一次使用element ui的表格组件,不太清楚会遇到这样的坑,以为能轻 ...
- 关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题
方法使用前需了解: 来自”和“小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查该form上添加 ...
- vue+element ui 的表格列使用组件
前言:工作中用到 vue+element ui 的前端框架,有这个场景:很多表格的列有许多一样的,所以考虑将列封装为组件.转载请注明出处:https://www.cnblogs.com/yuxiaol ...
- 在vue中关于element UI 中表格实现下载功能,表头添加按钮,和点击事件失效的解决办法。
因为在element 中表格是使用el-table的形式通过数据来支撑结构,所以,表格的样式没有自己写的灵活,所以有了没法添加按钮的烦恼.下面是解决的方法. 准备工作: 一.下载npm安装包两个 1. ...
- vue.js+element ui Table+spring boot增删改查
小白初学,不懂的还是太多了,找了好多资料才做出来的先记录一下 1.先用Spring boot创建一个包含了增删改查的项目 2.创建vue.js项目 3.安装Element UI (1)进入项目文件夹下 ...
- element UI实现表格中添加开关控制按钮
我使用的是element ui V1.4.3 如下图是我要实现的效果: <template> <div> <el-button type="text" ...
- Vue框架Element UI教程-axios请求数据
Element UI手册:https://cloud.tencent.com/developer/doc/1270 中文文档:http://element-cn.eleme.io/#/zh-CN gi ...
- vue与element ui的el-checkbox的坑
一,场景 通过使用checkbox,实现如图的场景, 点击某个tag,实现选中和非选中状态. 二, 官网的例子 通过切换checked值为true或者false来实现,一个checkbox的状态切换 ...
- element UI 调整表格行高
使用element UI的table默认属性,绘制表格如下: 该表格的行高太大了,于是想调小一些. 查看官网的文档,table有几个属性, row-style:行的 style 的回调方法,也可以使用 ...
- vue开源Element UI表单设计及代码生成器
在日常的开发工作中,表单开发是较为繁琐且重复的.本文介绍一个我自己写的,提高开发效率的小工具. 1 可视化设计器 设计器基于Element UI ,可通过点击或拖拽的方式设计基本表单, 设计器生成的代 ...
随机推荐
- Java新特性-四大函数式接口
四大函数式接口指的是Consumer.Function.Predicate.Supplier,位于java.util.function包下: 函数式编程 lamabda表达式 函数式接口:在java中 ...
- [Windows]文件搜索利器Everything(附zip)
前言 写代码过程中,老大突然发一条信息 老大:这周周报发一下. 我:好的. 然后我就 显示桌面 打开-我的电脑 找到E盘,找到周报文件夹 寻找到所有周报中今天的周报 复制发送 当我用上Everythi ...
- git reset 之后切换到原来的commit
git reset的语法: git reset [--hard|soft|mixed|merge|keep] [<commit>或HEAD] 作用:将当前分支reset到指定的commit ...
- 使用Microsoft.Extensions.AI简化.NET中的AI集成
项目介绍 Microsoft.Extensions.AI是一个创新的 .NET 库,它为平台开发人员提供了一个内聚的 C# 抽象层,简化了与大型语言模型 (LLMs) 和嵌入等 AI 服务的交互.它支 ...
- P5987 [PA2019] Terytoria / 2023NOIP A层联测13 T3 全球覆盖
P5987 [PA2019] Terytoria / 2023NOIP A层联测13 T3 全球覆盖 题面及数据范围 对于一个点对,可以降维为线段,转化为 1 维的问题. 如图: 我们可以在横着的方向 ...
- 2024-11-20:交替子数组计数。用go语言,给定一个二进制数组 nums, 如果一个子数组中的相邻元素的值都不相同,我们称这个子数组为交替子数组。 请返回数组 nums 中交替子数组的总数。 输
2024-11-20:交替子数组计数.用go语言,给定一个二进制数组 nums, 如果一个子数组中的相邻元素的值都不相同,我们称这个子数组为交替子数组. 请返回数组 nums 中交替子数组的总数. 输 ...
- Python 潮流周刊#78:async/await 是糟糕的设计(摘要)
本周刊由 Python猫 出品,精心筛选国内外的 250+ 信息源,为你挑选最值得分享的文章.教程.开源项目.软件工具.播客和视频.热门话题等内容.愿景:帮助所有读者精进 Python 技术,并增长职 ...
- PHP无法连接MySQL8.0数据库问题处理 报错如下: SQLSTATE[HY000]
PHP无法连接MySQL8.0数据库问题处理报错如下:SQLSTATE[HY000] [2054] The server requested authentication method unknown ...
- python之gevent
gevent 是一个基于协程的 Python 网络库,它使用 Greenlet 库提供了一种高效的协程实现. 协程是一种轻量级的线程,允许并发执行,但没有真正的并行性.协程可 以在遇到 I/O 操作时 ...
- 盘点一下在swagger中一些有用且经常忽略的属性
震惊!,这些Swagger的属性你都了解吗? 盘点一下在swagger中一些有用且经常忽略的属性 启用永久授权EnablePersistAuthorization app.UseSwaggerUI(c ...