Vue3导出el-table为execl文件

在开发时遇到了这样的需求,整理之后向大家分享一下,欢迎积极讨论与指正哦

因为在实现表格时使用了分页插件,在导出时只能导出本页的内容,最后选择了这样的方法:

正常显示的表格使用分页后的数据

在这里设置了id

而用于导出的表格使用总数据,并且将display设置为none,不影响页面,这样在保证了搜索与排序功能不受影响的同时可以完整的导出所有的数据

接下来是导出部分的实现


npm install xlsx@^0.16.0   //这里版本为0.16.0 高于0.18.0需要换别的方法
npm install file-saver
// 导入依赖
import XLSX from 'xlsx'
import FileSaver from 'file-saver'//导出
//绑定点击事件
const exportBtn = () => {const el = document.getElementById('tab');console.log(el);// 文件名const filename = '导出.xlsx';const wb = XLSX.utils.table_to_book(el, { raw: true });const wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' });try {FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), filename);} catch (e) {console.log(e);}return wbout;
};

这样就可以导出啦

希望能为你带来帮助

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/336195.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

计算机网络-各层协议

大家在搞嵌入式开发的时候基本都了解过七层网络协议、五层网络协议、四层网络协议,那么今天让我们更加的深入了解一下: 历史发展介绍 OSI七层模型由ISO国际标准化组织提出的通信标准。TCP/IP四层模型是OSI七层模型的简化版,OSI在它被官方完…

LINUX基础第十一章:文件系统与日志服务管理

目录 一.LINUX文件系统 1.inode表和block (1)inode (2)block 2.查看inode号命令 3.Linux系统文件三种主要时间属性 4.磁盘空间还剩余很多但无法继续创建文件 5.inode大小 二.日志 1.日志保存位置 2.日志文件的分类 &am…

借助 ControlNet 生成艺术二维码 – 基于 Stable Diffusion 的 AI 绘画方案

背景介绍 在过去的数月中,亚马逊云科技已经推出了多篇 Blog,来介绍如何在亚马逊云科技上部署 Stable Diffusion,或是如何结合 Amazon SageMaker 与 Stable Diffusion 进行模型训练和推理任务。 为了帮助客户快速、安全地在亚马…

高通平台开发系列讲解(USB篇)adb function代码分析

文章目录 一、FFS相关动态打印二、代码入口三、ffs_alloc_inst四、ep0、ep1&ep2的注册五、读写过程沉淀、分享、成长,让自己和他人都能有所收获!😄 📢本文主要介绍高通平台USB adb function代码f_fs.c。 一、FFS相关动态打印 目录:msm-4.14/drivers/usb/gadget/fun…

2023年全国职业院校技能大赛(高职组)“云计算应用”赛项赛卷③

2023年全国职业院校技能大赛(高职组) “云计算应用”赛项赛卷3 目录 需要竞赛软件包环境以及备赛资源可私信博主!!! 2023年全国职业院校技能大赛(高职组) “云计算应用”赛项赛卷3 模块一 …

LeetCode刷题--- 最小路径和

个人主页:元清加油_【C】,【C语言】,【数据结构与算法】-CSDN博客 个人专栏 力扣递归算法题 http://t.csdnimg.cn/yUl2I 【C】 ​​​​​​http://t.csdnimg.cn/6AbpV 数据结构与算法 ​​​http://t.csdnimg.cn/hKh2l 前言:这个专栏主要讲述动…

Python基础入门第九课笔记(文件和文件夹)

1,新建文本并且写内容 a open(1.text,w) a.write("""aaa bbb ccc""") a.close() 2,seek( )移动文件指针 文件对象.seek(偏移量,起始位置) # 起始位置:0开头,1当前位置,2文件结尾…

python接口自动化(十)--post请求四种传送正文方式(详解)

1.简介 post请求我在python接口自动化(八)--发送post请求的接口(详解)已经讲过一部分了,主要是发送一些较长的数据,还有就是数据比较安全等。我们要知道post请求四种传送正文方式首先需要先了解一下常见的四…

xilinix 7系列器件生成已加密文件和已经过身份验证的文件

注释 :如需了解更多信息,请参阅《使用加密确保 7 系列 FPGA 比特流的安全》(XAPP1239)。 要生成加密比特流,请在 Vivado IDE 中打开已实现的设计。在主工具栏中,依次选择“Flow” → “Bitstream Settings”(流程 >…

RuntimeError: Expected to have finished reduction

这个问题是因为模型中定义了一堆函数,但是在loss.backward()后,模型中的某些函数跟loss计算无关。 1、可能出现的原因: 首先检查model 的forward前向过程,可能其中有些函数的计算结果没有参与到loss的计算部分。如果是比较大的框…

JPackage指令将可执行Jar包打包成EXE运行程序

jpackage是jdk14正式加入的一个用于独立打包的工具。 官网简介翻译: jpackage工具将以Java应用程序和Java运行时映像作为输入,并生成一个包含所有必要依赖项的Java应用程序映像。它可以生成特定于平台格式的本机软件包,例如Windows上的exe或…

Yolov5双目测距-双目相机计数及测距教程(含代码)

Yolov5双目测距是一种基于深度学习模型的双目相机计数及测距方法,它可以用于在不同场景下进行物体检测、识别和测距。 以下是 Yolov5双目测距的主要特点和步骤: 1. 双目相机: Yolov5双目测距需要使用一对双目相机来获取场景中的图像数据。…