Vue3导出el-table为execl文件

news2024/9/20 9:09:35

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

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

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

在这里设置了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.coloradmin.cn/o/1370175.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

电力监控系统在数据中心应用

摘 要:在电力系统的运行过程中,变电站作为整个电力系统的核心,在保证电力系统可靠的运行方面起着至关重要的作用,基于此需对变电站监控系统的特点进行分析,结合变电站监控系统的功能需求,对变电站电力监控系…

Linux的网络设置

一.查看网络配置 1.查看网络接口信息 - ifconfig ① 直接使用 ifconfig 命令 默认显示活动的网卡 解析: ② ifconfig 具体网卡名称 只显示具体的网卡的信息 ③ ifconfig -a 显示所有的网卡 ④ ifconfig 网卡名称 down 关闭网卡 ifdown 关闭网卡 …

GO语言笔记2-变量与基本数据类型

变量使用步骤 声明赋值使用 package main import "fmt" func main(){var age int //声明一个 int类型的变量叫ageage 18 //给变量用 赋值fmt.Println(age) //使用变量 输出变量的值 } 编译运行输出变量值 变量的四种使用方式 package main import "fmt&q…

[足式机器人]Part2 Dr. CAN学习笔记-动态系统建模与分析 Ch02-8 Bode Plot伯德图

本文仅供学习使用 本文参考: B站:DR_CAN Dr. CAN学习笔记-动态系统建模与分析 Ch02-8 Bode Plot伯德图 Bode Plot 手绘技巧与应用

在线文本转语音工具的实现

文章目录 文章最下面有工具链接!前言edge-tts库1.首先使用pip安装这个库2.写一段示例代码3.多线程 pydub库1.介绍2.示例 将他们整合起来我把他们部署到了我的服务器上,可以在线使用点我使用工具 文章最下面有工具链接! 前言 最近有文字转语…

将Llama2上下文长度扩展100倍;效率更高的SeTformer;LLM准确度基本不变加速1.56×;FreeTalker

本文首发于公众号:机器感知 将Llama2上下文长度扩展100倍;效率更高的SeTformer;LLM准确度基本不变加速1.56;FreeTalker Latte: Latent Diffusion Transformer for Video Generation 本文使用Latent Diffusion Transformer(Latte…

程序媛的mac修炼手册-- 终端(terminal)常用命令

「终端(terminal)」相当于macOS的一个 App ,它的特殊之处是,它是管理其它App的App,操作主要通过命令行界面 (CLI) 。 相比于我们日常熟悉的用户界面(User Interface,UI)&#xff0c…

go image.DecodeConfig 和image.Decode 不能同时使用吗

问题场景:在同时使用go image.DecodeConfig 和image.Decode获取图片信息时,报错提示: 无法读取图像配置 image: unknown format package mainimport ("fmt""github.com/golang/freetype""image""image/d…

GPT在地学、GIS、气象、农业、生态、环境等领域应用教程

详情点击链接:GPT在地学、GIS、气象、农业、生态、环境等领域应用教程 一开启大模型 1 开启大模型 1)大模型的发展历程与最新功能 2)大模型的算法构架与底层逻辑 3)大模型的强大功能与应用场景 4)国内外经典大模型(ChatGPT、LLaMA、Gemini、DALLE、…

【echarts】雷达图参数详细介绍

1. 详细示例 var option {tooltip: {trigger: item},radar: {startAngle: 90,//第一个指示器轴的角度,默认90indicator: [// 指示器{ name: Category A, max: 220 },// name:指示器名称{ name: Category B, max: 200 },// max:指示器的最大值,可选&…

【JAVA】throw 和 throws 的区别?

🍎个人博客:个人主页 🏆个人专栏: JAVA ⛳️ 功不唐捐,玉汝于成 目录 前言 正文 throw: throws: 区别: 作用: 使用位置: 个数: 应…

第1章 初识JavaScript

学习目标 了解JavaScript基本概念,能够说出JavaScript的作用、由来、组成和特点 熟悉常见浏览器的特点,能够说出浏览器的组成以及作用 掌握下载和安装Visual Studio Code编辑器,能够独立完成编辑器的下载和安装 掌握JavaScript代码引入方式…

【forwardRef与useImperativeHandle】

1、 2、 3、 4、代码 1、index.tsx代码 import React, {useRef, useEffect} from react import MyInput from "./InputItem";export default function Index() {const ref useRef<any>(null);useEffect(() > {ref.current?.focus();}, [])return (<&…

安达发|APS计划与排程软件之超级BOM功能

在制造业中&#xff0c;物料清单&#xff08;BOM&#xff09;是一个重要的概念&#xff0c;它描述了产品的组成结构和各个部件之间的关系。随着制造业的发展&#xff0c;对于生产计划和排程的要求也越来越高&#xff0c;因此APS&#xff08;高级计划与排程&#xff09;软件应运…

2023年,To B资本航船走向哪了?

国内To B领域在去掉泡沫、结束资本狂欢之后&#xff0c;投资决策愈加理性。但与此同时&#xff0c;下滑的步伐正在放慢&#xff0c;交易数量和金额的降低逐渐放缓&#xff0c;市场逐渐走向稳定。 作者|斗斗 编辑|皮爷 出品|产业家 2023年&#xff0c;在一众业内人士的眼中&…

openai API key 提示你的卡被拒绝怎么办?

openai API key 对于IP的要求非常的严格&#xff0c;以前你开腾讯云、阿里云的服务器都可以绑定、现在就不行了&#xff0c;一定要纯净的IP才可以绑定 一、排除法 1、首先确保自己的账号是没有被封的&#xff0c;可以正常使用的 2、确保银行卡是可以支持openai的银行卡 3、…

IDEA的lombok失效导致工程代码编译build失败的问题处理

今天也是奇了怪了&#xff0c;打包工程&#xff0c;编译始终失败&#xff0c;明明代码符号存在的 解决办法就是&#xff1a;-Djps.track.ap.dependenciesfalse

嵌入式(八)电源低功耗管理 | 五种运行模式 模式转换 睡眠定时器唤醒

文章目录 1 低功耗基本介绍1.1 五种运行模式 2 低功耗控制相关寄存器3 睡眠唤醒实现方式3.1 系统睡眠定时器唤醒 1 低功耗基本介绍 对于嵌入式系统而言&#xff0c;一个非常重要的内容就是低功耗&#xff0c;尽可能减少电量损耗&#xff0c;然后获得更多的续航时间 当然功耗越…

UG装配-布置

UG装配中&#xff0c;当一个产品在不同情况下具有不同的形态的时候&#xff0c;为了快速进行展示&#xff0c;我们可以使用布置命令. 我们可以直接在工具栏布置中&#xff0c;或者在装配导航器中右键单击装配体&#xff0c;选择布置-编辑&#xff0c;添加不同不同的布置页面 使…

模拟算法(模拟算法 == 依葫芦画瓢)万字

模拟算法 基本思想引入算法题替换所有的问号提莫攻击Z字形变换外观数列数青蛙 基本思想 模拟算法 依葫芦画瓢解题思维要么通俗易懂&#xff0c;要么就是找规律&#xff0c;主要难度在于将思路转换为代码。 特点&#xff1a;相对于其他算法思维&#xff0c;思路比较简单&#x…