Vue 导出前端数据报表为xlsx文件

文章目录

  • 前言
  • 一、添加依赖包
  • 二、新建导出功能按钮组件
  • 三、使用示例


前言

导出数据报表基本上有两种形式,第一种是前端请求数据之后,后端将数据导出为文件,前端再将文件下载下来;第二种是前端请求数据之后,前端将数据保存到文件。

本文将讲解第二种方法,前端请求数据之后将数据渲染到表格,再通过按钮点击保存到本地文件。


一、添加依赖包

在 package.json 文件,添加以下三个依赖包:file-saver、moment 和 xlsx。

  • package.json
{"dependencies": {"file-saver":<

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

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

相关文章

Sharding-JDBC源码解析与vivo的定制开发

作者&#xff1a;vivo IT 平台团队 - Xiong Huanxin Sharding-JDBC是在JDBC层提供服务的数据库中间件&#xff0c;在分库分表场景具有广泛应用。本文对Sharding-JDBC的解析、路由、改写、执行、归并五大核心引擎进行了源码解析&#xff0c;并结合业务实践经验&#xff0c;总结…

vue3之Prop特性注意点

1、Ts中接收父组件传递参数prop的定义写法&#xff1a; <script setup lang"ts">defineProps<{title?: stringlikes?: number}>() </script>2、所有的 props 都遵循着单向绑定原则&#xff0c;props 因父组件的更新而变化&#xff0c;子组件中不…

基于 Vue3 学习状态管理器:pinia

pinia 基本概念 Pinia 是 Vue 的存储库&#xff0c;Pinia和Vuex一样都是是vue的全局状态管理器&#xff0c;它允许跨组件/页面共享状态。实际上&#xff0c;其实Pinia就是Vuex5&#xff0c;官网也说过&#xff0c;为了尊重原作者&#xff0c;所以取名 pinia&#xff0c;而没有…

raylib库在CodeBlocks上的配置

raylib下载 raylib | A simple and easy-to-use library to enjoy videogames programming CodeBlocks

监控易对多云平台的运维管理方案

随着企业信息化建设的不断深入&#xff0c;越来越多的企业开始采用多云策略&#xff0c;以充分利用不同云服务提供商的优势&#xff0c;实现业务的高可用性、灵活性和成本效益。然而&#xff0c;多云环境也带来了运维管理的复杂性&#xff0c;如何有效监控和管理多个云平台的资…

本地部署websocket服务端并结合内网穿透实现固定公网地址连接

文章目录 1. Java 服务端demo环境2. 在pom文件引入第三包封装的netty框架maven坐标3. 创建服务端,以接口模式调用,方便外部调用4. 启动服务,出现以下信息表示启动成功,暴露端口默认99995. 创建隧道映射内网端口6. 查看状态->在线隧道,复制所创建隧道的公网地址加端口号7. 以…

CGAL 5.6.1 - Algebraic Foundations

1. 引言 CGAL 的目标是精确计算非线性对象&#xff0c;特别是定义在代数曲线和曲面上的对象。因此&#xff0c;表示多项式、代数扩展和有限域的类型在相关的实现中扮演着更加重要的角色。为了跟上这些变化&#xff0c;我们引入了这个软件包。由于引入的框架必须特别支持多项式…

【杂言】迟到的 2024 展望

研一下开学已有半月&#xff0c;本来想在家写的新年展望拖到了现在。翻看 2021 年的展望&#xff0c;我发现 flag 基本达成了&#xff08;除了 12 点睡觉&#xff09;&#xff0c;所以给新的一年立下大方向也是很有必要的。也许等到 60 岁我再回看&#xff0c;也是一件趣事吧。…

docker常见命令

命令 说明 docker pull 拉取镜像 docker push 推送镜像到DockerRegistry docker images 查看本地镜像 docker rmi 删除本地镜像 docker run 创建并运行容器&#xff08;不能重复创建&#xff09; docker stop 停止指定容器 docker start 启动指定容器 docker r…

15、技巧之八: 如何确认WebDriver支持哪个版本的Xpath?【Selenium+Python3网页自动化总结】

Firefox目前支持XPath 1.0版本&#xff0c;目前没有计划支持XPath 2.0版本。 曾经想知道给定的WebDriver支持哪个版本的XPath吗&#xff1f;我们当然希望是2.0或3.0版本&#xff0c;但最可能的版本是1.0。正如Selenium维基所述&#xff0c;WebDriver在可能的情况下使用浏览器的…

window环境下使用k8s部署.net core项目

前提&#xff1a;已经部署镜像到Docker 在项目发布目录下新建.yaml文件&#xff0c;内容如下&#xff08;以下仅举例出两种方式内容&#xff0c;可按需自由配置&#xff09; --方式一(创建deployment 、服务、指定命名空间) # ------------------- 注意层级结构&#xff0c;…

如何下载网页中嵌套的PDF

项目场景&#xff1a; 网页中常有发布的PDF文件&#xff0c;只有浏览功能 问题描述 想下载的话有时候会截图&#xff0c;或者联系网站管理员 解决方案&#xff1a; 1.使用谷歌浏览器或者360浏览器极速模式&#xff0c;在当前页面按F12 2.网络&#xff08;Network&#xff09;…

OpenSSL 安全漏洞(CVE-2023-3817)

厂商补丁: 目前厂商已发布升级补丁以修复漏洞&#xff0c;补丁获取链接&#xff1a; https://www.openssl.org/news/secadv/20230731.txt OpenSSL安全建议[2023年7月31日] 检查DH q参数值花费过多时间(CVE-2023-3817) 严重程度:低 问题总结:DH键或参数过长可能导致检查速度很…

电脑远程桌面选项变成灰色没办法勾选怎么办?

有些人在使用Windows系统自带的远程桌面工具时&#xff0c;会发现系统属性远程桌面选项卡中勾选启用“允许远程连接到此计算机”。 导致此问题出现的原因主要是由于组策略或者注册表设置错误造成的。 修复远程桌面选项变灰的两种方法&#xff01; 方法一&#xff1a;设置本地组…

从spark streaming与structured streaming看spark core与spark sql的区别

导读 Spark中针对流式数据处理的方案有&#xff1a; Spark StreamingStructured Streaming 本文通过对比spark streaming与structured streaming&#xff0c;来深入理解spark core与spark sql的区别。 Spark Streaming 基于微批(DStream) Spark Streaming是基于微批(Micro batc…

linux-rpm命令

rpm命令管理程序包&#xff1a;安装、升级、卸载、查询和校验 1、忽略依赖关系安装/卸载包 安装&#xff1a;rpm -Uvh 软件包名 --nodeps 卸载&#xff1a;rpm -e 软件包名 --nodes&#xff01;&#xff01;&#xff01;&#xff01;慎用&#xff01;&#xff01;&#xff01…

Qt之Gui的事件转换

QGuiApplication的实现类QGuiApplicationPrivate方法processWindowSystemEvent处理window系统事件 static void processWindowSystemEvent(QWindowSystemInterfacePrivate::WindowSystemEvent *e);在QWindowSystemInterface的处理事件方法中会调用上面的processWindowSystemEv…

1.【Labview白话系列】Labview数组精讲

题主经过写文章一段时间的发现&#xff0c;许多同学对该软件的理解和编程能力是不太一样的&#xff0c;有些知识相对一些同学较为简单&#xff0c;但是有些同学提问就比较困难。那么针对这个问题&#xff0c;题主打算出一期说白话系列的专栏&#xff0c;在该栏目中用最通俗的大…

pycharm手动安装常用插件

下载插件 &#xff08;1&#xff09;下载地址&#xff1a;JetBrains Marketplace 这里以语言包为例子 2、中文语言包 进入pycharm中的设置&#xff0c;点击plugins,选从磁盘中安装插件