当前位置： 首页 > news >正文

vue3+axios请求导出excel文件

news 来源：原创 2024/9/8 5:42:38

 在Vue 3中使用axios请求导出Excel文件，可以发送一个GET或POST请求，并设置响应类型为blob或arraybuffer，然后使用new Blob()构造函数创建一个二进制文件，最后使用URL.createObjectURL()生成一个可以下载的链接。

先看代码

import axios from 'axios';// 导出Excel文件的函数
export function exportExcel() {const url = '/api/export'; // 替换为你的接口地址axios({method: 'get',url: url,responseType: 'blob', // 重要！设置响应类型为blob或arraybuffer}).then(response => {// 创建一个新的Blob对象，设置文件类型
//response.data是后端返回的文件流数据，如果response是文件流就直接用response，根据后端返回实际情况而定const blob = new Blob([response.data], { type: 'application/vnd.ms-excel;charset=UTF-8' });// 创建一个指向新Blob对象的URLconst url = window.URL.createObjectURL(blob);// 创建一个a标签用于下载const link = document.createElement('a');link.href = url;link.setAttribute('download', 'export.xls'); // 设置下载文件名document.body.appendChild(link);// 触发下载link.click();// 清理并移除元素和对象URLdocument.body.removeChild(link);window.URL.revokeObjectURL(url);}).catch(error => {console.error('导出Excel失败:', error);});
}

后端返回的数据是一个二进制数据流，可以console.log(response)打印一下响应数据，查看数据是不是Blob类型，如果不是的话可能会出现乱码、undefined等情况

以arraybuffer类型为准的post请求，以下是后端返回数据截图，这里response的值是文件流

后端返回的数据

 响应拦截器获取到的数据

 打印的response数据

 如果前端得到的数据结构跟上面截图一样，大概是没有问题的，如果出现中文乱码、undefined等情况，可以检查一下是否在请求时设置了响应类型，blob和arraybuffer还是有区别的，blob不行就试试arraybuffer

相关文章：

vue3+axios请求导出excel文件

在Vue 3中使用axios请求导出Excel文件，可以发送一个GET或POST请求，并设置响应类型为blob或arraybuffer，然后使用new Blob()构造函数创建一个二进制文件，最后使用URL.createObjectURL()生成一个可以下载的链接。 先看代码 import…...

编程日记 2024/9/8 5:42:38

ubuntu 20.04中安装nginx 流程

ubuntu20.04 安装 nginx 操作流程 1.更新软件包列表 sudo apt update 2.安装最新版本的nginx sudo apt install nginx 或者安装指定版本的nginx 查看可安装的版本 sudo apt-cache show nginx 安装指定版本 sudo apt install nginx<version> 3.安装完后查看安装的…...

编程日记 2024/8/26 20:08:57

【数据结构与算法】迷宫求解------回溯法

回溯法 一.迷宫求解算法二.二维数组表示地图1.地图2.初始化地图3.地图的打印 三.进入迷宫四.栈的实现五.迷宫内探1.首先判断我们的入口2.入栈做标记3.开始探险4.出口判断5.能否下一步6.做标记7.不能下一步 六.运行结果 一.迷宫求解算法 当我们想要找到迷宫的出口,那我们在计算…...

编程日记 2024/9/7 7:31:59

mysql线上查询前要注意资源限制

资源限制是一种防止数据库查询占用过多时间和资源的手段。以下是MySQL和SQL Server中如何设置查询执行时间的例子。 MySQL的MAX_EXECUTION_TIME 在MySQL 5.7.8及以上版本中&#xff0c;可以使用MAX_EXECUTION_TIME提示来限制SQL语句的执行时间。此提示告诉MySQL服务器只允许查…...

编程日记 2024/8/27 19:44:48

LeetCode20 有效的括号

前言 题目&#xff1a; 20. 有效的括号 文档&#xff1a; 代码随想录——有效的括号 编程语言&#xff1a; C 解题状态&#xff1a; 自己的做法空间复杂度过高 思路 括号匹配是使用栈解决的经典问题。本题技巧性比较强&#xff0c;思考的时候要与栈的使用相对照&#xff0c;这…...

编程日记 2024/8/31 22:28:50

STL常用容器-pair对组map/multimap容器

pair对组创建 功能描述&#xff1a; 成对出现的数据&#xff0c;利用对组可以返回两个数据&#xff1b; pair中第一个元素为key&#xff08;键值&#xff09;&#xff0c;起到索引的作用&#xff0c;第二个元素是value值&#xff08;实际值&#xff09; 两种创建方式&#…...

编程日记 2024/9/5 16:42:38

操作系统（信号处理）

一、信号介绍 什么是中断&#xff1a; 当进程接收到消息后中止当前正在执行的任务&#xff0c;转而执行其它任务&#xff0c;等待其它任务执行完毕后再返回继续执行。这种执行模式称为中断&#xff0c;分为硬件中断和软件中断两种 什么是信号&#xff1a; 信号是UNIX、类UNI…...

编程日记 2024/9/5 18:01:18

UE GAS学习

【Unreal】虚幻GAS系统快速入门-CSDN博客 GameplayTags FGameplayTags是一种层级标签&#xff0c;如Parent.Child.GrandChild。 通过GameplayTagManager进行注册。替代了原来的Bool&#xff0c;或Enum的结构&#xff0c;可以在玩法设计中更高效地标记对象的行为或状态。 Gamep…...

编程日记 2024/9/7 17:58:13

Android开发之事件分发

#来自ウルトラマンゼロ&#xff08;哉阿斯&#xff09; 1 Activity 构成 平常布局展示在ContentView中。 2 事件分发 事件分发的本质其实就是把事件&#xff08;Touch&#xff09;封装成 MotionEvent 类&#xff0c;然后传递给 View 的层级处理。 MotionEvent 事件类型主要有…...

编程日记 2024/9/5 16:29:35

android compose设置圆角不起作用

进度条progress设置背景圆角不起作用&#xff1a; 源码&#xff1a; Composablefun CircularProgress(modifier: Modifier, vm: TabarCmpViewModel?) {if (vm?.showLoading?.value ! true) returnBox(modifier modifier.background(Color(0x99000000)).defaultMinSize(minW…...

编程日记 2024/9/4 20:14:43

记 centos7 安装 .net8-sdk

1、下载.net8 sdk https://download.visualstudio.microsoft.com/download/pr/60218cc4-13eb-41d5-aa0b-5fd5a3fb03b8/6c42bee7c3651b1317b709a27a741362/dotnet-sdk-8.0.303-linux-x64.tar.gz 2、 可以使用wget命令直接下载到当前文件夹 wget https://download.visualstudio.…...

编程日记 2024/8/31 19:57:47

君正T41开发板环境搭建_串口登陆_配置IP_telnet登陆_mount挂载_安装交叉编译工具链

目录 1 开发板外观 2 串口连接 3芯片内存情况 4 配置IP地址 5 telnet登陆 6 mount挂载目录 7 安装交叉编译工具链 1 开发板外观 2 串口连接 我直接用MobaXterm连接&#xff0c;虽然我还没有文档&#xff0c;但是我觉得波特率大概率就是115200&#xff0c;试了下确实可以…...

编程日记 2024/9/6 12:04:21

使用fetch调用接口代码公用写法

问: 现在有一个接口, 我希望你使用fetch调用这个接口, 有没有公用写法? 回答: const apiUrl https://xxxx.xxxx.com/xxxx-xxxx/xxxx/xxxx;// 发起GET请求 fetch(apiUrl).then(response > {if (!response.ok) {throw new Error(Network response was not ok);}return re…...

编程日记 2024/9/8 1:25:57

软件工程

软件工程定义 软件工程由方法、工具、过程3个部分组成。软件工程：方法、工具、过程。 （1）软件工程使用的方法是完成软件项目的技术手段，它支持整个软件生命周期；（2）软件工程使用的工具是人们在开发软件的活动中智力和体力的扩展与延伸，它自动或半自动地支持软件的开发和…...

编程日记 2024/8/28 12:57:03

ROS 2中创建一个节点

ROS 2中创建一个节点 ROS 2&#xff08;机器人操作系统2&#xff09;是一个为机器人开发提供支持的开源框架。本文将介绍如何使用ros2 pkg create命令来创建一个新的ROS 2包&#xff0c;并在该包中创建一个简单的C和Python节点。 前提条件 在开始之前&#xff0c;请确保您已…...

编程日记 2024/8/31 23:52:52

发送邮箱API的性能指标有哪些，如何评估？

发送邮箱API的安全性措施&#xff1f;使用邮箱API的注意事项&#xff1f; 无论是用于事务性邮件、营销邮件还是通知邮件&#xff0c;发送邮箱API的性能直接影响用户体验和业务效果。AokSend将详细探讨这些问题&#xff0c;帮助您更好地理解和优化发送邮箱API。 发送邮箱API&a…...

编程日记 2024/8/30 13:11:42

BUUCTF [安洵杯 2019]easy_serialize_php 1

打开题目&#xff0c;看到一串php代码&#xff0c;试着代码审计一下&#xff0c;看一下有用信息 可以看出是通过$_SESSION[img]来读取文件 extract可以将数组中的变量导入当前变量表 也就是说我们可以伪造$_SESSION 数组中的所有数据 这里传递一个参数fphpinfo 先用hackbar进…...

编程日记 2024/9/8 1:02:24

【CONDA】库冲突解决办法

如今&#xff0c;使用PYTHON作为开发语言时&#xff0c;或多或少都会使用到conda。安装Annaconda时一般都会选择在启动终端时进入conda的base环境。该操作&#xff0c;实际上是在~/.bashrc中添加如下脚本&#xff1a; # >>> conda initialize >>> # !! Cont…...

编程日记 2024/9/6 13:15:18

AI6-PPOCRLabel带GPU训练

一、移动PPOCRLabel 从anconda安装目录中找到PPOCRLabel文件夹，移动到PaddleOCR-release-2.8文件夹下 二、启动PPOCCRLabel cmd命令行进入paddle_py38环境，使用PPOCRLabel --lang ch来启动PPOCRLabel 三、打开图片文件夹自动标志 四、标签数据整理 …...

编程日记 2024/9/6 19:29:27

nginx 代理 mysql 连接

HTTP 模块&#xff1a; HTTP模块提供了处理HTTP请求的功能&#xff0c;包括反向代理、负载均衡、缓存、HTTP代理等。 Stream 模块&#xff1a; Stream模块用于处理TCP和UDP流量&#xff0c;允许Nginx作为代理服务器处理非HTTP流量。 将如下配置添加到 nginx.conf 配置文件中&…...

编程日记 2024/9/8 3:19:46

科普文：JUC系列之多线程门闩同步器Semaphore的使用和源码解读

一、概述 Semaphore&#xff08;信号量&#xff09;是用来控制同时访问特定资源的线程数量&#xff0c;它通过协调各个线程&#xff0c;以保证合理的使用公共资源。 二、使用案例 可以用于做流量控制&#xff0c;特别是公用资源有限的应用场景&#xff0c;比如数据库连接。假…...

编程日记 2024/9/6 23:05:46

Linux-理解shell

文章目录 5. 理解shell5.1 shell的类型5.2 交互shell和系统默认shell5.3 安装zsh shell程序5.4 shell的父子关系5.5 命令列表5.6 命令分组5.7 使用命令分组创建子shell5.8 子shell用法5.9 shell的非内建命令和内建命令5.9.1 非内建命令5.9.2 内建命令5.9.3 history和alias命令介…...

编程日记 2024/9/5 16:50:04

PSINS工具箱函数介绍——distance

文章目录 关于工具箱使用方法例程实践源代码运行结果 函数解析 关于工具箱 kfinit是kf的参数初始化函数&#xff0c;用于初始化滤波参数 本文所述的代码需要基于PSINS工具箱&#xff0c;工具箱的讲解&#xff1a; PSINS初学指导&#xff1a;https://blog.csdn.net/callmeup/a…...

编程日记 2024/9/7 9:18:26

『哈哥赠书 - 55期』-『码农职场：IT人求职就业手册』

文章目录 ⭐️ 码农职场&#xff1a;IT人求职就业手册⭐️ 本书简介⭐️ 作者简介⭐️ 编辑推荐 这是一本专为广大IT行业求职者量身定制的指南&#xff0c;提供了从职前准备到成功就业的全方位指导&#xff0c;涵盖了职业目标规划、自我技能评估、求职策略、简历准备以及职场心…...

编程日记 2024/8/27 22:38:19

中文网为何日渐衰弱！因为审核不懂开源万岁的 MIT License。因为大众不明白开源共享才是互联网的根本精神，而不是付费收费。知识是开源的民主的。

中文网衰落了 今天看一个视频&#xff0c;说中文网页占世界网页的比重持续下滑&#xff0c;非常糟糕&#xff0c; 所以我抱着振兴中文网的信念&#xff0c;沉寂几年后决心复出。 结果我写的一个日常使用的代码&#xff0c;引用了一个 MIT License的 python 库 https://pypi.…...

编程日记 2024/9/1 1:37:01

微服务之SpringAMQP详解

目录 前言 1. 概述 2. Basic Queue简单队列模型 2.1 消息发送 2.2 消息接收 2.3 总结 3. WorkQueue模型 3.1 消息发送 3.2 消息接收 3.3 测试 3.4 消费预取限制 3.5 总结 4. 发布、订阅 5. Fanout 5.1 声明队列和交换机 5.2 消息发送 5.3 消息接收 5.4 测试 5…...

编程日记 2024/9/3 10:57:01

鲜花销售小程序的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;用户管理&#xff0c;商家管理&#xff0c;鲜花信息管理&#xff0c;鲜花分类管理&#xff0c;管理员管理&#xff0c;系统管理 微信端账号功能包括&#xff1a;系统首页&#xff0c;购物车&#xff0…...

编程日记 2024/9/6 23:03:05

突破exif_imagetype()

在CTF&#xff08;Capture The Flag&#xff09;竞赛中&#xff0c;突破exif_imagetype()函数的限制通常涉及到利用该函数在图像类型验证上的局限性。exif_imagetype()是PHP中的一个函数&#xff0c;用于获取图像文件的类型&#xff0c;例如JPEG、PNG、GIF等。这个函数在Web应用…...

编程日记 2024/9/6 4:49:59

【面试题】合井K个升序链表

合井K个升序链表 仅供面试学习 给定一个链表数组&#xff0c;每个链表都已经按升序排列。将所有链表合并到一个升序链表中&#xff0c;并返回合并后的链表。以下是详细的解题步骤和 Python 代码示例。 一、问题描述 将多个升序链表合并为一个升序链表。要求算法能有效处理链表…...

编程日记 2024/9/7 12:49:58

Spring Framework 5.0新增的WebClient

Spring Framework 5.0 引入了 WebClient&#xff0c;这是一个新的非阻塞、响应式 Web 客户端 API&#xff0c;旨在为构建响应式微服务提供更好的支持。WebClient 是基于 Project Reactor 的响应式流 API 构建的&#xff0c;它可以高效地处理大量的并发请求&#xff0c;非常适合…...

编程日记 2024/8/23 14:53:28

使用SpringBoot+Vue3开发项目（1）---- 设计用户注册和登录的接口及页面

目录 一.所用技术栈&#xff1a; 二.前端创建工程&#xff1a; 1.使用elementplus展开前端页面格式布局&#xff1a; 2.基于Vue3的使用来实现登录与注册&#xff1a; &#xff08;1&#xff09;定义数据模型&#xff1a; &#xff08;2&#xff09;:model绑定表单&#xf…...

编程日记 2024/9/7 20:51:13

C语言新手小白详细教程（6）函数

希望文章能够给到初学的你一些启发&#xff5e; 如果觉得文章对你有帮助的话&#xff0c;点赞 关注 收藏支持一下笔者吧&#xff5e; 阅读指南&#xff1a; 开篇说明为什么要使用函数&#xff1f;1.定义一个函数2.调用函数3.定义函数详解 开篇说明 截止目前&#xff0c;我们已…...

编程日记 2024/9/2 14:32:49

数据结构：栈（含源码）

目录 一、栈的概念和结构 二、栈的实现 2.1 头文件 2.2 各个功能的实现 初始化栈 入栈 出栈 获取栈顶元素和栈中有效个数 判断栈是否为空 栈的销毁 2.3 测试 完整源码 一、栈的概念和结构 栈&#xff1a;一种特殊的线性表&#xff0c;其只允许在固定的一端进行插入和…...

编程日记 2024/9/4 10:53:16

【初阶数据结构】详解顺序表（上）

文章目录 1. 数据结构2. 顺序表2.1 顺序表的概念及结构2.1.1 线性表2.1.2 顺序表与数组的差别 2.2 顺序表的分类2.2.1 静态顺序表2.2.2 动态顺序表 2.3 静态顺序表和动态顺序表的区别 在学完C语言的知识后&#xff0c;我们也该跨入到学习数据结构的领域中来。毕竟学习语法是为解…...

编程日记 2024/9/4 8:46:19

【自用】在conda下安装不同的cuda版本（本次为cuda11.7）

参考博客&#xff1a; [1]虚拟环境conda安装cuda11.7和cudnn和pytorch [2]conda环境下安装nvcc -V [3]解决 nvcc -V 显示的cuda版本不正确 #查看当前cuda情况 nvcc -V#查看cudatoolkit的可安装版本 conda search cudatoolkit --info#安装cudatoolkit conda install cudato…...

编程日记 2024/9/1 12:47:01

4.5.门控循环单元GRU

门控循环单元GRU ​ 对于一个序列&#xff0c;不是每个观察值都是同等重要的&#xff0c;可能会遇到一下几种情况&#xff1a; 早期观测值对预测所有未来观测值都具有非常重要的意义。 考虑极端情况&#xff0c;第一个观测值包含一个校验和&#xff0c;目的是在序列的末尾辨别…...

编程日记 2024/9/5 20:21:33

【Redis】redis详解

一、redis几种工作模式&#xff1a; 1、单机模式 优点&#xff1a;部署简单&#xff0c;成本低&#xff0c;高性能&#xff0c;不需要数据同步&#xff0c;单个机器性能高。 缺点&#xff1a;可靠性低&#xff0c;单节点宕机后无法继续使用。 2、主从模式&#xff1a; 优点&am…...

编程日记 2024/9/6 22:31:12

3d打印相关资料

模型库 拓竹makerworld爱给...

编程日记 2024/9/3 0:49:46

【React】常见的 HOC 使用案例

高阶组件&#xff08;Higher-Order Component&#xff0c;HOC&#xff09;是一种用于在 React 中复用组件逻辑的技术。以下是几个常见的 HOC 使用案例&#xff0c;以及详细的代码示例。 1. 日志记录 HOC 这个高阶组件将在每次组件更新时记录日志。 LoggingHOC.js import Re…...

编程日记 2024/9/2 20:23:03

volatile 关键字的使用

volatile 关键字的使用 1、标志位2、传递不依赖当前值的变量3、双重检查锁定&#xff08;简化&#xff09;4、注意事项 &#x1f496;The Begin&#x1f496;点点关注&#xff0c;收藏不迷路&#x1f496; volatile 关键字用于确保变量在多线程环境中的可见性和禁止指令重排序&…...

编程日记 2024/9/3 19:43:21

十六、【Python】基础教程 - 【Flask】网络编程开发

目录 前言 Flask 基础概念 安装 Flask 示例&#xff1a;创建一个 Flask Web 应用 运行 Flask 应用 更复杂的例子 测试新功能 前言 Flask 是一个用 Python 编写的微型 Web 框架&#xff0c;它以简单性和灵活性著称&#xff0c;非常适合快速开发小型到中型的 Web 应用。F…...

编程日记 2024/9/2 10:49:19

【楚怡杯】职业院校技能大赛 “Python程序开发”赛项样题四

一、竞赛任务概述 本赛项包括“网络爬虫”、“数据清洗”、“数据分析与可视化”、“机器学习”4个竞赛任务&#xff0c;各任务分值分别为15分、30分、35分、20分&#xff0c;本赛项满分为100分。 二、注意事项 1.请根据大赛所提供的竞赛环境&#xff0c;检查所列的硬件设备…...

编程日记 2024/9/5 18:10:32

Python酷库之旅-第三方库Pandas(068)

目录 一、用法精讲 271、pandas.Series.dt.dayofyear属性 271-1、语法 271-2、参数 271-3、功能 271-4、返回值 271-5、说明 271-6、用法 271-6-1、数据准备 271-6-2、代码示例 271-6-3、结果输出 272、pandas.Series.dt.days_in_month属性 272-1、语法 272-2、参…...

编程日记 2024/9/6 16:02:28

静态字典的优雅解决方案 springboot 字典接口实现 java 加强静态字典的实现

项目场景 我们在所有的项目中都会使用到字典这个功能&#xff0c;字典其实又分静态字典和动态字典&#xff0c;顾名思义静态是固定格式和字典&#xff0c;动态字典可能是查出数据库组合的字典内容&#xff0c;我在这里对静态字典做了的研究&#xff0c;对静态字典做了分类加强…...

编程日记 2024/9/7 14:19:26

树状菜单分析

树状菜单总结 首先先用ajax获取假数据 然后在获取假数据里面判断的时候添加一个函数&#xff0c;for循环遍历里面所有的数据&#xff0c;然后判断pid等于0的数据&#xff0c;然后添加到新创建的空数组里面 将添加好的数组作为下面创建函数的实参的值&#…...

编程日记 2024/9/4 7:49:27

WPF中调用UWP API

最近在github上看到一个音乐播放器项目&#xff0c;dopamine(项目地址&#xff1a;GitHub - digimezzo/dopamine-windows: Audio player which tries to make organizing and listening to music as simple and pretty as possible.) 在编译时&#xff0c;提示有一个库找不到 …...

编程日记 2024/9/5 20:14:33

基于C#调用文心一言大模型制作桌面软件(可改装接口)

目录 开发前的准备账号注册应用创建应用接入 开始开发创建项目设计界面使用 AK&#xff0c;SK 生成鉴权签名窗体代码 百度智能云千帆大模型平台什么是百度智能云千帆大模型平台模型更新记录 开发前的准备 账号注册 访问百度智能云平台&#xff0c;通过百度账号登录或手机号验证…...

编程日记 2024/8/27 22:22:45

数据结构----------贪心算法

什么是贪心算法&#xff1f; 贪心算法&#xff08;Greedy Algorithm&#xff09;是一种在问题求解过程中&#xff0c;每一步都采取当前状态下最优&#xff08;即最有利&#xff09;的选择&#xff0c;从而希望导致最终的全局最优解的算法策略。 贪心算法的核心思想是做选择时&…...

编程日记 2024/8/27 19:44:57

爬虫中使用多进程、多线程的混合方式遇到的数据丢失问题

项目场景&#xff1a; 网络爬虫项目&#xff0c;主要实现多进程、多线程方式快速缓存网页资源到MongoDB&#xff0c;并解析网页数据&#xff0c;将信息写入到csv文件中。 问题描述 在单独使用多线程的过程中&#xff0c;是没有问题的&#xff0c;比如这个爬虫示例是爬取豆瓣电…...

编程日记 2024/9/2 17:16:17

机器学习之主成分分析（PCA）

机器学习之主成分分析&#xff08;PCA&#xff09; 1. PCA的数学基础1.1 线性代数基础1.1.1 向量与矩阵的表示1.1.2 矩阵的特征值与特征向量 1.2 协方差矩阵1.2.1 定义与性质1.2.2 在PCA中的作用 2. PCA的理论概述2.1 主成分的定义2.1.1 方差最大化的原则2.1.2 正交性与主成分正…...

编程日记 2024/9/6 1:29:05