el-tabel导出excel表格

news2025/1/23 17:49:39

1、安装插件

npm install file-saver --save
npm install xlsx --save

2、引入插件


import FileSaver from "file-saver";
import * as XLSX from 'xlsx';

3、在tabel中添加ref属性和导出方法

 

4、添加方法

    exportExcel (excelName) {
      try {
        const $e = this.$refs['report-table'].$el
        let $table = $e.querySelector('.el-table__fixed')
        if (!$table) {
          $table = $e
        }

        const wb = XLSX.utils.table_to_book($table, { raw: true })
        const wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
        FileSaver.saveAs(
          new Blob([wbout], { type: 'application/octet-stream' }),
          `${excelName}.xlsx`,
        )
      } catch (e) {
        if (typeof console !== 'undefined') console.error(e)
      }
    }

 

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

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

相关文章

DFS之剪枝与优化--小猫爬山

思路&#xff1a;对小猫的数量和车箱数进行bfs&#xff0c;一旦小猫的数量达到n&#xff0c;就统计ans的数量&#xff0c;如果当前车的剩余重量无法再承受任意一个猫的重量&#xff0c;那么我们将车辆数1来保证小猫能够下山。 #include<bits/stdc.h> using namespace std…

ChatGPT使用技巧和实践

在工作使用当中&#xff0c;需要使用到GPT&#xff0c;目前使用的是浏览器端的WeTab。 下面是给AI的提问和交互 请写出HashMap和Hashtable的区别 HashMap和Hashtable是Java中两种常用的哈希表实现&#xff0c;它们在功能和使用上有一些区别。线程安全性&#xff1a;HashMap是…

如何利用在线培训考试系统提升员工技能?

在如今竞争激烈的商业环境中&#xff0c;不断提升员工的技能和知识变得至关重要。为了满足这一需求&#xff0c;越来越多的企业开始采用在线培训考试系统。借助这种系统&#xff0c;企业可以以有效和高效的方式提供培训&#xff0c;并确保员工能够学到最新的知识和技能。 1. 灵…

3.2 队列

定义: 队列是一种插入元素只能在一端进行, 删除元素只能在另一端进行的线性表. 所谓队列是线性表, 是指队列的逻辑结构属于线性表, 只不过在操作上加了一些约束. 队列可以插入元素的一端叫做队尾(Rear), 可以删除元素的一端叫做队头(Front). 队列是一种先进先出的结构. First I…

vue创建脚手架项目启动

vue创建脚手架项目&启动 1、创建项目2、运行项目 1、创建项目 vue create vuecli-demo说明这里使用vue2项目 2、运行项目 cd vuecli-demo yarn serve访问 http://localhost:8080/

springboot()—— 集成redis

1、新建一个springboot项目 2、添加redis依赖包 可以在新建项目的时候就选上 也可以建完项目以后手动导入pom.xml <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis</artifactId> </d…

[uni-app] 微信小程序 - 组件找不到/导入报错 (分包问题导致)

文章目录 问题表现问题原因 问题表现 切换了个路径下的组件, 导入失败, 尝试了清缓存\重启\删项目等一些列操作均无效 上面两个路径中, 都存在一模一样的videItem.vue Main路径是可以导入的 Main路径是无法导入的 问题原因 后来发现, 是 分包的问题导致. 我们先来假设一个场…

如何通过日志分析性能

根据监控指标&#xff0c;只要有一项指标不超了&#xff0c;就不满足性能&#xff0c;根据这个指标&#xff0c;分析数据流向&#xff0c;看下到底什么原因导致这个指标超了&#xff0c;是本身原因还是其它原因&#xff0c;分析客户端、网络、硬件、中间件、数据库、应用程序等…

一个简单的 Android 版本目录(Version catalog)实现指南

一个简单的 Android 版本目录实现指南 使用 TOML 格式 在本文中&#xff0c;我们将探讨版本目录以及如何实现它。 版本目录 Gradle 版本目录使您能够以可扩展的方式添加和维护依赖项和插件。因此&#xff0c;不必在各个构建文件中硬编码依赖项名称和版本&#xff0c;而是在目…

Windows 10 关于进程出现 已挂起,导致无法结束任务,或者taskkill 命令也被拒绝访问等问题解决方法

理解 也就是说&#xff0c;平时电脑启动的是快速启动配置&#xff0c;相当于是休眠&#xff0c;但是有可能会存在一些 bug &#xff0c;所以&#xff0c;作为开发者来说&#xff0c;最好是取消这个快速启动的配置&#xff0c;不然 bug 满天飞&#xff0c;当然这只是有可能。 …

MYSQL练习三答案

练习3 构建数据库 数据库 数据表 answer开头表为对应题号答案形成的数据表 表结构 表数据 答案 1、写一条SQL查询语句&#xff0c;找出所有属于"Electronics"类 别的产品信息。 SQL语句 select * from products where category Electronics;结果&#xff1a; 2…

安防视频管理平台GB设备接入EasyCVR, 如何获取RTMP与RTSP视频流

安防视频监控平台EasyCVR可拓展性强、视频能力灵活、部署轻快&#xff0c;可支持的主流标准协议有国标GB28181、RTSP/Onvif、RTMP等&#xff0c;以及支持厂家私有协议与SDK接入&#xff0c;包括海康Ehome、海大宇等设备的SDK等。平台既具备传统安防视频监控的能力&#xff0c;比…

微信小程序中使用echarts方法

小程序中使用echarts echarts是一个基于JS的数据可视化图标库&#xff0c;它提供了直观&#xff0c;生动&#xff0c;可交互&#xff0c;可个性定制的数据可视化图表。一般在vue中会使用到&#xff0c;并且官网也详细的说明了如何在vue中使用&#xff0c;但是今天我想来探讨的…

python面试宝典1

目录标题 python基础1、代码中修改不可变数据会出现什么问题&#xff1f;什么异常&#xff1f;2、a1,b2,不用中间变量交换 a 和 b 的值&#xff1f;3、print调用python中底层的什么方法&#xff1f;4、理解下面代码&#xff0c;结果输出5、对input()函数的理解6、理解代码&…

誉天程序员-常用网站

学习方法六大招 日常你是如何学习新知识的&#xff1f;&#xff08;面试官爱问哦&#xff09; 1、百度百科概念了解 2、技术官网简单了解 3、同类产品技术选型 4、百度搜索入门案例 5、泛读百文瘦弱圆润 6、遇到问题问AI助手&#xff08;chatGPT&#xff09;噢 技术路线图&a…

C#中未能找到为main方法指定的XXX.Program怎么解决

有时在修改项目名称后&#xff0c;报错未能找到为main方法指定的XXX.Program 解决办法&#xff1a; 点击进入项目属性&#xff0c;将启动对象设置为空或者你要指定的XXX.Program&#xff08;改名后的&#xff09;

基于SDRAM的串口回环测试

文章目录 前言一、SDRAM简介二、SDRAM芯片手册解析2.1 芯片信息2.2 功能描述2.3 指令集 三、SDRAM配置3.1 初始化3.2 自动刷新3.3 突发写操作3.4 突发读操作3.5 仲裁3.5 FIFO控制3.5 FIFO数据读 四、结果验证 前言 本文将介绍在AWC_C4MB开发板上进行基于串口的SDRAM数据回环测试…

能直接运营的校园跑腿代买拿寄取小程序开发

​说到做跑腿生意&#xff0c;除了做同城跑腿配送外&#xff0c;校园跑腿可是即成本又低又好操作的一个项目。 一般省会城市大学大专基本都是有好几所的&#xff0c;学校的特点是人员密集&#xff0c;跑腿配送周期短&#xff0c;且配送人员好招募&#xff0c;推广人员好招募。…

css - Media Query

使用bootstrap的grid system可以在一个较为粗糙的范围得到较好的响应性&#xff0c;但是通过viewport可以看到网站在具体哪个像素点处变得丑陋&#xff0c;再通过css media query来精细调整网页布局。 可以通过media query来提高网页移动响应能力。

网络安全 Day17-计算机网络知识02(复杂物理原件)

计算机网络知识02&#xff08;复杂物理原件&#xff09; 1. 交换机2. 路由器 1. 交换机 什么是交换机 实现一个网络内多台主机之间通讯的设备用于电信号转发和放大的网络设备 常见的交换机&#xff1a;以太网交换机&#xff0c;电话交换&#xff0c;光纤交换机交换机的种类 二…