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

【vue3】vue3+express实现图片/pdf等资源文件的下载

news 来源：原创 2025/8/26 17:09:41

文件资源的下载，是我们业务开发中常见的需求。作为前端开发，学习下如何自己使用node的express框架来实现资源的下载操作。

实现效果

请添加图片描述

代码实现

前端

1.封装的请求后端下载接口的方法,需求配置aixos的请求参数里面的返回数据类型为blob

// 下载
export function downLoad(name) {return instance.get(`/course/download?name=${name}`, {responseType: "blob",});
}

2.下载的核心方法，这里不能直接后端返回给我们的资源url，因为对于图片和pdf文件，浏览器的首选操作是预览，不是下载本地，所以我们这里需要转换下数据格式。

const downloadSource = async (item) => {const data = await downLoad(item.attachments);const blob = new Blob([data]);let filename = item.name;const fileUrl = item.attachments;const extname = fileUrl.substring(fileUrl.lastIndexOf(".") + 1);filename = filename + "." + extname;const link = document.createElement("a");link.download = filename;link.target = "_blank";link.style.display = "none";link.href = URL.createObjectURL(blob);document.body.appendChild(link);link.click();URL.revokeObjectURL(link.href);document.body.removeChild(link);
};

3.后端响应的数据格式
在这里插入图片描述

后端
1.模拟数据

2.后端接口方法,"Content-Disposition这个响应头表示资源是需要下载的，如果含有中文可能会报错，解决方法是只需要我们encodeURIComponent转译就行了。

//下载资料
const imagePath = (name) => path.join(__dirname, `../public/images/${name}`);
const downloadFile = (req, res, next) => {// console.log("🚀 ~ fs.readFile ~ imagePath:", req.query.name);const nameArr = req.query.name.split("/");fs.readFile(imagePath(nameArr[nameArr.length - 1]), (err, buffer) => {if (err) {res.status(500).send("Error reading image");return;}// 设置响应头switch (req.query.name) {case "pdf":res.setHeader("Content-Type", "application/pdf");break;default:res.setHeader("Content-Type", "image/jpeg");}// 设置响应头res.setHeader("Content-Type", "application/pdf");res.setHeader("Content-Disposition",`attachment; filename=${encodeURIComponent(nameArr[nameArr.length - 1])}`);// 发送图片数据res.send(buffer);});
};

在这里插入图片描述
3.配置请求方法路径

这样我们就实现了图片，pdf等资源的下载。这里只演示了图片和资源两种文件类型，其余的类型是一样的原理，可以自行添加测试。

【vue3】vue3+express实现图片/pdf等资源文件的下载

文件资源的下载，是我们业务开发中常见的需求。作为前端开发，学习下如何自己使用node的express框架来实现资源的下载操作。实现效果代码实现前端 1.封装的请求后端下载接口的方法,需求配置aixos的请求参数里面的返回数据类型为blob // 下载 export…...

编程日记 2025/8/26 17:09:41

【BUG】Redis RDB快照持久化及写操作禁止问题排查与解决

1 问题描述在使用Redis 的过程中，遇到如下报错，错误信息是 “MISCONF Redis is configured to save RDB snapshots, but it is currently not able to persist on disk...”，记录下问题排查过程。 2 问题排查与解决该错误提示表明&#…...

编程日记 2025/8/26 16:53:23

【HD-RK3576-PI】定制用户升级固件

硬件：HD-RK3576-PI 软件：Linux6.1Ubuntu22.04 在进行 Rockchip 相关开发时，制作自定义的烧写固件是一项常见且重要的操作。这里主要介绍文件系统的修改以及打包成完整update包升级的过程。一、修改文件系统镜像（Ubuntu环境操作&…...

编程日记 2025/8/26 16:58:01

【AI学习】李宏毅老师讲AI Agent摘要

在b站听了李宏毅2025最新的AI Agent教程，简单易懂，而且紧跟发展，有大量最新的研究进展。教程中引用了大量论文，为了方便将来阅读相关论文，进一步深入理解，做了截屏纪录。同时也做一下分享。根据经验调整…...

编程日记 2025/8/25 21:15:49

狂神SQL学习笔记十：修改和删除数据表字段

1、修改与删除表 alter 修改表的名称： 增加表的字段： 修改表的字段（重命名，修改约束）： 修改约束重命名删除表的字段删除表...

编程日记 2025/8/25 23:28:14

OSPF综合实验

一、网络拓扑二、实验要求 1，R5为ISP，其上只能配置IP地址;R4作为企业边界路由器； 2，整个0SPF环境IP基于172.16.0.8/16划分; 3，所有设备均可访问R5的环回; 4，减少LSA的更新量，加快收敛&#xf…...

编程日记 2025/8/24 16:06:14

2025 cs144 Lab Checkpoint 2 小白超详细版

文章目录 1 环形索引的实现1.1 wrap类wrapunwrap 2 实现tcp_receiver2.1 tcp_receiver的功能2.2 传输的报文格式TCPSenderMessageTCPReceiverMessage 2.3 如何实现函数receive（）send（） 1 环形索引的实现范围是0~2^32-1 需要有SY…...

编程日记 2025/8/26 16:55:44

VMware虚拟机安装Ubuntu 22.04.2

一、我的虚拟机版本二、浏览器搜索Ubuntu 三、下载Ubuntu桌面版四、下这个五、创建新的虚拟机六、选择典型，然后下一步七、选择稍后安装操作系统，然后下一步八、选择Linux ,版本选择Ubuntu 64位九、选择好安装位置十、磁盘大小一般选20G就够用了…...

编程日记 2025/8/26 17:00:22

XSS漏洞及常见处理方案

文章背景： 在近期项目安全测试中，安全团队发现了一处潜在的跨站脚本攻击（XSS）漏洞，该漏洞可能导致用户数据被篡改或会话劫持等安全风险。针对这一问题，项目组迅速响应，通过代码修复、输入过滤、…...

编程日记 2025/8/26 16:55:45

TCP标志位抓包

说明 TCP协议的Header信息，URG、ACK、PSH、RST、SYN、FIN这6个字段在14字节的位置，对应的是tcp[13]，因为字节数是从[0]开始数的，14字节对应的就是tcp[13]，因此在抓这几个标志位的数据包时就要明确范围在tcp[13] 示例1…...

编程日记 2025/8/26 16:50:59

C/C++条件判断

条件判断 if语句的三种形态 if(a<b){} 、 if(a<b){}else{} 、 if(a<b){}else if(a>b) else{} if语句的嵌套嵌套的常见错误（配对错误）,与前面最近的，而且还没有配对的if匹配错误避免方法：严格使用 { }、先写&am…...

编程日记 2025/8/26 17:00:20

单位门户网站被攻击后的安全防护策略

政府网站安全现状与挑战近年来，随着数字化进程的加速，政府门户网站已成为政务公开和服务公众的重要窗口。然而，网络安全形势却日益严峻。国家互联网应急中心的数据显示，政府网站已成为黑客攻击的重点目标，被篡改和被…...

编程日记 2025/8/25 18:57:01

# 工具记录

工具记录键盘操作可视化工具openark64系统工具dufs-webui文件共享zotero文献查看cff explorerNoFencesfreeplane开源思维导图...

编程日记 2025/8/25 6:43:06

C/C++运算

C语言字符串的比较 #include <string.h> int strcmp( const char *str1, const char *str2 );例如: int ret; ret strcmp(str1, str2);返回值： str1 < str2时， 返回值< 0（有些编译器返回 -1） str1 > str2时…...

编程日记 2025/8/24 17:36:44

CloudWeGo 技术沙龙·深圳站回顾：云原生 × AI 时代的微服务架构与技术实践

2025 年 3 月 22 日，CloudWeGo “云原生 AI 时代的微服务架构与技术实践”主题沙龙在深圳圆满落幕。作为云原生与 AI 微服务融合领域的深度技术聚会，本次活动吸引了来自企业、开发者社区的百余位参与者，共同探讨如何通过开源技术应对智能时代…...

编程日记 2025/8/23 2:05:15

STM32移植文件系统FATFS——片外SPI FLASH

一、电路连接主控芯片选型为：STM32F407ZGT6，SPI FLASH选型为：W25Q256JV。采用了两片32MB的片外SPI FLASH，电路如图所示。 SPI FLASH与主控芯片的连接方式如表所示。 STM32F407GT6W25Q256JVPB3SPI1_SCKPB4SPI1_MISOPB5SPI1_MOSI…...

编程日记 2025/8/24 14:35:02

首先进光猫管理界面将password改成text就可以看到加密后的密码了复制密码到下面代码里 import hashlibdef sha256(todo):return hashlib.sha256(str(todo).encode()).hexdigest()def md5(todo):return hashlib.md5(str(todo).encode()).hexdigest()def find_secret(secret,…...

编程日记 2025/8/21 20:12:46

驱动-兼容不同设备-container_of

驱动兼容不同类型设备在 Linux 驱动开发中，container_of 宏常被用来实现一个驱动兼容多种不同设备的架构。这种设计模式在 Linux 内核中非常常见，特别是在设备驱动模型中。linux内核的主要开发语言是C，但是现在内核的框架使用了非常多的面向…...

编程日记 2025/8/26 1:27:29

UE5 检测球形范围的所有Actor

和Untiiy不同，不需要复杂的调用首选确保角色添加了Sphere Collision 然后直接把sphere拖入蓝图，调用GetOverlappingActors来获取碰撞范围内的所有Actor...

编程日记 2025/8/25 8:46:14

AI大模型学习十：‌Ubuntu 22.04.5 调整根目录大小，解决根目录磁盘不够问题

一、说明由于默认安装时导致home和根目录大小一样，导致根目录不够，所以我们调整下二、调整 # 确认/home和/是否为独立逻辑卷，并属于同一卷组（VG） rootnode1:~# lsblk NAME MAJ:MIN RM SIZE…...

编程日记 2025/8/23 20:44:31

在ros2上使用opencv显示一张图片

1.先将图片放到桌面上 2.打开终端ctrlaltT，查看自己是否已安装opencv 3.创建工作环境 4.进入工作目录并创建ROS2包添加OpenCV依赖项 5.进入/home/kong/opencv_ws/opencv_use/src目录创建.cpp文件并编辑 6.代码如下 my_opencv.cpp #include <cstdio> #include…...

编程日记 2025/8/23 16:51:49

训练神经网络的原理(前向传播、反向传播、优化、迭代)

训练神经网络的原理通过前向传播计算预测值和损失，利用反向传播计算梯度，然后通过优化算法更新参数，最终使模型在给定任务上表现更好。核心：通过计算损失函数（通常是模型预测与真实值之间的差距）对模型参…...

编程日记 2025/8/25 20:50:39

每日一题（小白）暴力娱乐篇30

顺时针旋转，从上图中不难看出行列进行了变换。因为这是一道暴力可以解决的问题，我们直接尝试使用行列转换看能不能得到想要的结果。 public static void main(String[] args) {Scanner scan new Scanner(System.in);int nscan.nextInt();int mscan.next…...

编程日记 2025/8/23 9:13:28

【HTTPS】免费SSL证书配置Let‘s Encrypt自动续期

【HTTPS】免费SSL证书配置Lets Encrypt自动续期 1. 安装Certbot1.1 snapd1.2 certbot2. 申请泛域名证书使用 DNS 验证申请泛域名证书3.配置nginx申请的 SSL 证书文件所在目录nginx配置证书示例查看证书信息和剩余时间4.自动续期手动自动5.不同服务器使用1. 安装Certbot 1.1 sn…...

编程日记 2025/8/20 19:01:54

企业应如何防范 AI 驱动的网络安全威胁？

互联网技术和 AI 科技为世界开启了一个新的发展篇章。同时，网络攻击也呈现出愈发强势的发展势头：高级持续性威胁 （APT：Advanced Persistent Threat）组织采用新的战术、技术和程序 (TTP)、AI 驱动下攻击数量和速度的提高…...

编程日记 2025/8/26 11:17:04

决策树简介

【理解】决策树例子决策树算法是一种监督学习算法，英文是Decision tree。决策树思想的来源非常朴素，试想每个人的大脑都有类似于if-else这样的逻辑判断，这其中的if表示的是条件，if之后的else就是一种选择或决策。程序设计中的…...

编程日记 2025/8/25 8:13:11

ScrollView（滚动视图）详解和按钮点击事件

文章目录 **ScrollView（滚动视图）详解****1. 核心特性****2. 基本用法****XML 示例：简单滚动布局** **3. 水平滚动：HorizontalScrollView****4. 高级用法****(1) 嵌套滚动控件****(2) 动态添加内容****(3) 监听滚动事件** **5. 注…...

编程日记 2025/8/26 11:10:22

2025年3月，再上中科院1区TOP，“等级熵+状态识别、故障诊断”

引言 2025年3月，研究者在国际机械领域顶级期刊《Mechanical Systems and Signal Processing》（JCR 1区，中科院1区 Top，IF：7.9）上以“Rating entropy and its multivariate version”为题发表科学研究成果。…...

编程日记 2025/8/24 10:29:41

根据pdf文档生成问答并进行评估

目标是根据pdf文档生成问答，并进行评估。首先，安装依赖 pip install PyPDF2 pandas tqdm openai -q 具体过程如下： 1、将pdf放在opeai_blog_pdfs目录下，引用依赖 2、上传pdf文件，创建向量库 3、单个提问的向量检索…...

编程日记 2025/8/25 11:54:11

计算机网络 - 四次挥手相关问题

通过一些问题来讨论 TCP 的四次挥手断开连接说一下四次挥手的过程？为什么需要四次呢？time-wait干嘛的，close-wait干嘛的，在哪一个阶段？状态CLOSE_WAIT在什么时候转换成下一个状态呢？为什么 TIME-WAIT 状态…...

编程日记 2025/8/22 13:31:28

SLAM | 两组时间戳不同但同时开始的imu如何对齐

场景： 两个手机在支架上，同时开始采集数据需求： 对齐两个数据集的imu数据做到A图片 B imu 做法： 取出来两组imu数据到excel表中，画图 A组 B组： x轴 ： 所有imu的时间戳减去第一个时间…...

编程日记 2025/8/22 18:26:03

code review时线程池的使用

一、多线程的作用多个任务并行执行可以提升效率异步，让与主业务无关的逻辑异步执行，不阻塞主业务二、问题描述 insertSelective()方法是一个并发度比较高的业务，主要是插入task到任务表里，新建task，并且insertSele…...

编程日记 2025/8/23 4:28:38

物流网络暗战升级DHL新布局将如何影响eBay卖家库存分布策略？

物流网络暗战升级：DHL新布局将如何影响eBay卖家库存分布策略？ 跨境电商发展迅猛，卖家对物流的依赖程度不言而喻。尤其是平台型卖家，例如在eBay上经营多站点的卖家，物流成本和时效几乎直接决定了利润空间与客户满意度。…...

编程日记 2025/8/23 11:57:23

JAMA Netw. Open：机器学习解码大脑：精准预测PTSD症状新突破

创伤后应激障碍（PTSD）是一种常见的心理健康状况，它可以在人们经历或目睹创伤性事件（如战争、严重事故、自然灾害、暴力攻击等）后发展。PTSD的症状可能包括 flashbacks（闪回）、噩梦、严重的焦虑、…...

编程日记 2025/8/20 22:42:21

域控制器升级的先决条件验证失败,证书服务器已安装

出现“证书服务器已安装”导致域控制器升级失败时，核心解决方法是卸载已安装的证书服务‌。具体操作如下：‌ ‌卸载证书服务‌ 以管理员身份打开PowerShell，执行命令： Remove-WindowsFeature -Name AD-Certificate该命令会移除A…...

编程日记 2025/8/24 16:03:49

Node.js入门

Node.js入门 html,css,js 30年了 nodejs环境 09年出现 15年 nodejs为我们解决了2个方面的问题： 【锦上添花】让我们前端工程师拥有了后端开发能力（开接口，访问数据库） - 大公司BFF（50）【✔️】前端工程…...

编程日记 2025/8/22 19:21:30

使用CubeMX新建EXTI外部中断工程——不使用回调函数

具体的使用CubeMX新建工程的步骤看这里：STM32CubeMX学习笔记（3）——EXTI(外部中断)接口使用_cubemx exti-CSDN博客之前一直都是在看野火的视频没有亲手使用CubeMX生成工程，而且野火给的例程代码框架和自动生成的框架也不一样&…...

编程日记 2025/8/21 23:14:06

Verilog的整数除法

1、可变系数除法实现----利用除法的本质 timescale 1ns / 1ps // // Company: // Engineer: // // Create Date: 2025/04/15 13:45:39 // Design Name: // Module Name: divide_1 // Project Name: // Target Devices: // Tool Versions: // Description: // // Depe…...

编程日记 2025/8/17 19:05:04

win32汇编环境,网络编程入门之十九

;win32汇编环境,网络编程入门之十九 ;在这一编程里，我们学习一下如何使用gethostbyname函数，也顺便学一下如何将C定义的函数在WIN32汇编环境中使用 ;先看一下官方解释：从主机数据库中检索与主机名对应的主机信息。 ;它的原理是从你的电脑DNS中…...

编程日记 2025/8/22 13:31:41

Java学习手册：Java线程安全与同步机制

在Java并发编程中，线程安全和同步机制是确保程序正确性和数据一致性的关键。当多个线程同时访问共享资源时，如果不加以控制，可能会导致数据不一致、竞态条件等问题。本文将深入探讨Java中的线程安全问题以及解决这些问题的同步机制。线程安…...

编程日记 2025/8/25 6:45:51

在生信分析中，从生物学数据库中下载的序列存放在哪里？要不要建立一个小型数据库，或者存放在Gitee上？

李升伟整理在Galaxy平台中使用时，从NCBI等生物学数据库下载的DNA序列的存储位置和管理方式需要根据具体的工作流程和需求进行调整。以下是详细的分步说明和建议： 一、Galaxy中DNA序列的默认存储位置在Galaxy的“历史记录”（History&…...

编程日记 2025/8/20 2:26:08

Python异步编程入门：Async/Await实战详解

引言在当今高并发的应用场景下，传统的同步编程模式逐渐暴露出性能瓶颈。Python通过asyncio模块和async/await语法为开发者提供了原生的异步编程支持。本文将手把手带你理解异步编程的核心概念，并通过实际代码案例演示如何用异步爬虫提升10倍效率&#…...

编程日记 2025/8/20 21:54:27

cmd 终端输出乱码问题 |Visual Studio 控制台输出中文乱码解决

在网上下载，或者移植别人的代码到自己的电脑，使用VS运行后，控制台输出中文可能出现乱码。这是因为源代码的编码格式和控制台的编码格式不一致。文章目录查看源代码文件编码格式查看输出控制台编码格式修改编码格式修改终端代码页补充总结 …...

编程日记 2025/8/24 5:58:17

【算法】椭圆曲线签名（ECDSA）

🤔什么是椭圆曲线签名（ECDSA）？ 椭圆曲线签名算法（Elliptic Curve Digital Signature Algorithm，简称 ECDSA）是一种基于椭圆曲线密码学的数字签名算法。它主要用于加密货币（如 Bit…...

编程日记 2025/8/25 1:16:37

Linux下使用MTK的SP_Flash_tool刷机工具

MTK的SP_Flash_tool刷机工具安装流程如下： 1、解压SP_Flash_Tool_Linux_v5.1336.00.100_Customer.zip unzip SP_Flash_Tool_exe_Linux_64Bit_v5.1520.00.100.zip 2、首先安装 libusb-dev 这个包： sudo apt-get install libusb-dev 3、安装成功之后…...

编程日记 2025/8/24 16:08:20

FRP内网穿透代理两个web页面（多端口内网穿透）

内网机器代理两个web页面出来下载frp 选择0.51.2版本下载，高版本测试为成功 frp下载地址部署frp server端（公网部署） #上传到opt rootsdgs-server07:/opt# ll frp_0.51.2_linux_amd64.tar.gz -rw-r--r-- 1 root root 11981480 Apr 15 1…...

编程日记 2025/8/25 0:21:16

Jenkins插件下载慢解决办法

jenkins设置插件使用国内镜像_jenkins 国内镜像-CSDN博客国内源以下是一些常用的国内 Jenkins 插件更新源地址： 清华大学：https://mirrors.tuna.tsinghua.edu.cn/jenkins/updates/update-center.json华为开源镜像站：https://mirrors.huawei…...

编程日记 2025/8/23 18:17:38

【Unity笔记】Unity开发笔记：ScriptableObject实现高效游戏配置管理（含源码解析）

在Unity开发中，高效管理游戏配置数据是提升开发效率的关键。本文分享如何使用ScriptableObject构建可编辑的键值对存储系统，并实现运行时动态读取。一、为什么选择ScriptableObject？ 1.1 ScriptableObject的核心优势独立资源：…...

编程日记 2025/8/22 4:39:09

FPAG IP核调用小练习

一、调用步骤 1、打开Quartus 右上角搜索ROM，如图所示 2、点击后会弹出如图所示其中文件路径需要选择你自己的 3、点击OK弹出如图所示图中红色改为12与1024 4、然后一直点NEXT，直到下图这里要选择后缀为 .mif的文件 5、用C语言生成 .mif文件 //…...

编程日记 2025/8/20 19:26:53

vue动画

1、动画实现 （1）、操作css的transition或animation （2）、在插入、更新或移除DOM元素时，在合适的时候给元素添加样式类名 （3）、过渡的相关类名： xxx-enter-active: 进入的时候激活…...

编程日记 2025/8/21 12:13:20

实现效果

代码实现

相关文章：