vue导出excel

news2025/1/21 7:58:59

1、下载依赖

npm install --save xlsx file-saver

ps:我下载完依赖后再运行会报错,偶尔情况,没找到原因,只需要卸载重新npm install就好
![在这里插入图片描述](https://img-blog.csdnimg.cn/2b6edecc6c1744d4bc2c376ec273eb6b.png

2、新建一个写公共js方法的文件**,如果你有的话 ,写在里面就好

在这里插入图片描述

然后在文件里编写导出excel的方法

import * as XLSX from "xlsx";
import FileSaver from 'file-saver'
export default {
  /**
   * 导出
   * @param mainTitle 主标题
   * @param subTitle 副标题
   * @param reqData
   * @returns {any}
   */
  exportExcel(name, tableName) {
    //name表示生成excel的文件名     tableName表示表格的id
    var sel = XLSX.utils.table_to_book(document.querySelector(tableName))
    var selIn = XLSX.write(sel, { bookType: 'xlsx', bookSST: true, type: 'array' })
    try {
      FileSaver.saveAs(new Blob([selIn], { type: 'application/octet-stream' }), name)
    } catch (e) {
      if (typeof console !== 'undefined') console.log(e, selIn)
    }
    return selIn
  },
}

直接全部复制就好

3、在页面写方法

先在页面引入

import comon from "@/api/commom";
exportExcel() {
      comon.exportExcel("涝情处理报告.xlsx", "#vcfResult");
      //第一个引号里面是表格导出时的名字
      //第二个是表格的id,这个插件是通过id导出的
    }

然后在表格上记得加id
在这里插入图片描述

id是自己定义的,原生,ele都可以,其他的应该也可以 没试过。

这个目前只能导出分页当前页的数据 全部数据以后更新啦~~

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

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

相关文章

Mysql 用户管理、权限管理(含用户密码修改)

和Linux 系统一样,也有着自己独有的用户管理系统,MySQL所有的用户信息都被保存在mysql数据库中的user表中。 目录 1、用户信息 2、用户管理 (1) 创建用户 (2) 删除用户 (3) 修改用户密码 3、用户权限管理 (1) 赋予权限(grant&#xff…

Mysql5.7+Orch+proxysql+keepalive

架构设计 通过gtid配置MySQL主从,通过orch实现高可用,orch通过raft实现自身的高可用,通过proxysql实现读写分离,proxysql可自身可以配置集群,通过keepalive实现虚拟IP漂移,keepalive可以自身配置集群 配…

蓝桥杯嵌入式LED流马灯(使用HAL_Delay、操作寄存器、使用定时器)

1.STM32CubeMX的配置 将PC8-PC15设置为GPIO_Output模式,将PD2也设置为GPIO_Output模式。 通过原理图知,LED(PC8-PC15)低电平有效,锁存器(PD2)高电平有效。 初始化时我将LED设置为高电平,熄灭状态&#xff0…

MyBatis - 09 - 自定义映射resultMap

文章目录1 准备工作1.1 建表1.2 创建实体类1.3 引出一个问题方案1方案2方案32.完整代码项目结构EmpMapper接口Emp类SqlSessionUtils工具类EmpMapper.xmljdbc.propertieslog4j.xmlmybatis-config.xmlResultMapTest完整代码在后面 1 准备工作 1.1 建表 t_emp 添加测试数据&…

AOP在PowerJob中的使用,缓存锁保证并发安全,知识细节全总结

这是一篇简简单单的文章,需要你简简单单看一眼就好,如果有不明白的地方,欢迎留言讨论。 在之前的文章中出现过一次AOP的使用,就是在运行任务之前,需要判断一下,触发该任务执行的server,是不是数…

[神经网络]图神经网络(GNN)

一、概述 1.图 图用来表示一些实体(entities)之间的关系(实体表示为点(node),关系表示为边(edge))。 关系分为有方向和无方向 2.数据的图表示 以图像文件为例,我们可以用邻接矩阵来表示一张图像。每个点表示一个像素点,若一个像素点有x个相邻…

重生之我是SVG(1)-入门

概述 引用一句来自MDN的一句话: SVG 图像是使用各种元素创建的,这些元素分别应用于矢量图像的结构、绘制与布局。在这里,您可以找到每个 SVG 元素的参考文档。 SVG 文件可以直接插入网页,成为 DOM 的一部分,然后用 Ja…

华三OSPF多区域互访实验

OSPF 实验 实验拓扑 实验需求 按照图示配置 IP 地址按照图示分区域配置 OSPF ,实现全网互通为了路由结构稳定,要求路由器使用环回口作为 Router-id,ABR 的环回口宣告进骨干区域 实验解法 1.配置 IP 地址部分 2.按照图示分区域配置 OS…

Zeppelin-0.10.0的安装

目录 1.解压到指定目录 2.修改文件名 3.拷贝配置文件 4.修改IP和端口号,也可以改为8090等端口号 5.修改zeppelin-env.sh文件 6.复制hive-site.xml文件到当前目录下 7.切换目录 8.拷贝hadoop和hive的各种jar包到/opt/soft/zeppelin/interpreter/jdbc目录下 …

SDYY大学普通话考试报名系统说明文档

系列文章目录 健康云平台开发说明文档SD申报系统迭代说明文档漏刻有时物联网传感器API接口对接说明文档Echarts数据分析系统Data Analysis Platform使用说明文档漏刻有时云守护数据可视化v2.0迭代升级说明文档百度地图POI多信息点标注开发说明文档漏刻有时云守护数据可视化画质…

Docker之路(7.DockerFile文件编写、DockerFile 指令解释、CMD与ENTRYPOINT的区别)

1.DockerFile介绍 dockerfile 是用来构建docker镜像的文件!命令参数脚本! 构建步骤: 编写一个dockerfile文件docker build构建成为一个镜像docker run 运行镜像docker push发布镜像(DockerHub、阿里云镜像仓库) 2.Dock…

如何使用ADFSRelay分析和研究针对ADFS的NTLM中继攻击

关于ADFSRelay ADFSRelay是一款功能强大的概念验证工具,可以帮助广大研究人员分析和研究针对ADFS的NTLM中继攻击。 ADFSRelay这款工具由NTLMParse和ADFSRelay这两个实用程序组成。其中,NTLMParse用于解码base64编码的NTLM消息,并打印有关消…

SAP 在建工程转固定资产

由固定资产归口采购部门或业务部门提交购置固定资产/在建工程的申请,经审批后,若是需要安装调试,则由财务部固定资产会计建立内部订单收集成本,月末结转在建工程。项目完工后,相关部门(公司装备部、分公司装…

Python虚拟环境迁移

使用python开发脚本使用的时候难免会遇到需要更换电脑来运行的问题,但是python不同版本的兼容性较差,在其他电脑使原python脚本运行时经常会发生一些问题,因此就需要python虚拟环境的迁移了。但是,直接将虚拟环境复制到另一台电脑…

Git学习(1)pro git阅读尚硅谷视频

目录 目录: 1. 起步 2. Git 基础 3. Git 分支 4. 服务器上的 Git 5. 分布式 Git 第一章 1.3 Git是什么 1.6运行git前的配置 该开源图书网站 Git - Book (git-scm.com) 目录: 1. 起步 1.1 关于版本控制1.2 Git 简史1.3 Git 是什么?1…

《图机器学习》-GNN Augmentation and Training

GNN Augmentation and Training一、Graph Augmentation for GNNs1、Feature Augmentation2、Structure augmentation3、Node Neighborhood Sampling一、Graph Augmentation for GNNs 之前的假设: Raw input graph computational graph,即原始图等于计算…

产品需求文档需要注意10件事

01什么是完美的产品需求文档(PRD)?就像产品经理一样,产品需求文档需要同时有效地执行许多不同的角色。该文档将由设计师,营销人员和工程团队使用,并且需要传达他们所需的所有必要信息。参考上面的漫画&…

html,

目录1. html新建1.1 html基本结构1.2 html细节2. 标签2.1 font标签2.2 字符实体2.3 标题标签2.4 超链接标签2.5 列表标签2.6 图片标签2.7 表格标签2.8 表单标签2.8.1基本使用2.8.2表单综合练习2.8.3表单格式化2.8.4表单使用细节2.8.5get请求2.8.6post请求2.9 其它标签2.9.1div标…

【JavaScript】第一章JavaScript入门

第一章 JavaScript入门JavaScript介绍JavaScript的起源JavaScript的应用JavaScript的特点JavaScript是脚本语言支持面向对象编程,面向过程编程/函数式编程支持跨平台执行JavaScript和ECMAScript的关系开发工具编辑器sublime textVisual Studio CodewebstormDreamwea…

安装VMWare虚拟机之后,发现网络贼卡,打开网页很慢

事情描述: 最近忙一个项目,需要到虚拟机中部署环境,安装完之后,就开整自己的项目了。 可以过几天,发现本地网络贼卡,打开各网页慢的一批,一开始还以为是路由器的问题,反复折腾之后排…