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

JavaScript 的 axios 实现文件下载功能

用 JavaScript 的 axios 实现文件下载功能,咱们要分几个步骤来搞定它!最主要的部分是处理 二进制数据,可以生成一个进度检测,然后把它保存为文件。

  • 文件名的获取
  • 二进制数据获取
  • 创建下载链接

const axios = require('axios');const getFileNameFromContentDisposition = (contentDisposition) => {const fileNameMatch = contentDisposition && contentDisposition.match(/filename="?([^"]+)"?/);return fileNameMatch ? fileNameMatch[1] : null;
};const getFileNameFromUrl = (fileUrl) => {return fileUrl.split('/').pop();
};const downloadFile = async (fileUrl, defaultFileName = 'downloaded-file') => {try {const response = await axios({url: fileUrl,method: 'GET',responseType: 'blob', // 以二进制方式接收数据onDownloadProgress: (progressEvent) => {// progressEvent 包含了下载进度信息const total = progressEvent.total; // 文件总大小const loaded = progressEvent.loaded; // 已经下载的部分// 计算进度百分比const percentage = Math.floor((loaded / total) * 100);// 显示进度(可替换为实际的进度条)console.log(`下载进度:${percentage}%`);}});// 获取文件名let fileName = getFileNameFromContentDisposition(response.headers['content-disposition']) || getFileNameFromUrl(fileUrl) || defaultFileName;// 创建 Blob 对象const blob = new Blob([response.data], { type: response.headers['content-type'] });// 创建 Blob URLconst blobUrl = window.URL.createObjectURL(blob);// 创建 <a> 元素并触发下载const link = document.createElement('a');link.href = blobUrl;link.download = fileName;// 将 <a> 元素添加到 DOM 并触发点击document.body.appendChild(link);link.click();// 移除 <a> 元素document.body.removeChild(link);// 释放 Blob URLwindow.URL.revokeObjectURL(blobUrl);} catch (error) {console.error('文件下载失败: ', error);}
};// 调用下载函数,传入文件URL
downloadFile('https://example.com/path/to/your/file.pdf');

从代码优化和健壮性角度出发,我们可以把这三种文件名获取方式结合起来,优先从响应头中提取文件名,然后如果没有Content-Disposition,再从 URL 提取文件名,最后可以提供一个默认文件名作为兜底方案。此外,考虑到代码可读性和可维护性,上面代码做一些清晰的封装与优化处理。

  1. 文件名获取逻辑封装

    • getFileNameFromContentDisposition:专门用于从 Content-Disposition 头部提取文件名,使用正则匹配,考虑了有引号和没有引号的情况。
    • getFileNameFromUrl:用于从 URL 提取文件名,确保从路径最后一部分获取到文件名。
    • 优先级:先从 Content-Disposition 获取文件名,如果没有,再从 URL 提取,最后使用默认文件名。
  2. 默认文件名

    • 提供了 defaultFileName 参数,确保当无法从响应头和 URL 获取文件名时,仍然有一个合理的文件名用于下载。
  3. 异常处理

    • 使用 try-catch 包围整个下载过程,确保即使出现网络或其他问题,错误也能被捕获并输出到控制台,而不会影响页面的其他功能。
  4. 内存管理

    • 确保 window.URL.revokeObjectURL(blobUrl) 在文件下载后被调用,释放 Blob URL,防止内存泄漏。

健壮性和可扩展性:

  • 健壮性:我们确保了即使某个步骤失败,代码也能继续运行。文件名无法从响应头或 URL 获取时,始终有一个默认文件名兜底。
  • 可扩展性:如果未来需要支持更多的文件名获取逻辑或更复杂的响应头处理,只需修改或添加新的获取方式即可,而不会影响整体代码结构。

为什么可以立即移除 <a> 元素?

点击事件:link.click() 触发后,浏览器会处理下载请求,下载任务已经在后台进行。<a> 元素的点击只是用来启动这个过程。

DOM 操作与事件的异步性:浏览器在处理用户点击和下载之间有一定的时间差,移除 <a>元素是在 click 事件完成后进行,不会影响已经发出的下载请求。


为什么不用关注文件类型

下载文件的前置条件中不依赖于文件的具体类型,实际上,代码对文件类型的处理是比较通用的。这是通过以下几个方面实现的:

1. 响应类型的设置

  • 在 Axios 请求中,我们将 responseType 设置为 'blob',这意味着无论文件类型是什么,浏览器都将其作为 Blob 对象处理。Blob 可以表示二进制数据,而不关心其具体的内容类型。

2. Content-Type 的使用

  • 在创建 Blob 时,我们根据响应头中的 Content-Type 来设置 Blob 的 MIME 类型。这使得文件在下载时能够被浏览器正确识别和处理:
    const blob = new Blob([response.data], { type: response.headers['content-type'] });
    

3. 文件名的获取

  • 文件名的获取逻辑同样不依赖于文件类型。我们根据 Content-Disposition 头部或 URL 提取文件名。这样无论是 PDF、图片、文本文件还是其他任何类型的文件,代码都能正确生成文件名并完成下载。

4. 下载时的文件处理

  • 浏览器会根据 Blob 的 MIME 类型和下载时提供的文件名来决定如何处理文件。例如,对于 PDF 文件,浏览器会使用 PDF 阅读器打开它,而对于图片文件则会直接展示。

注意事项

  • 特殊文件类型处理:虽然以上代码可以处理多种类型的文件,但某些文件(如 HTML 文件)可能会受到浏览器的默认行为影响。例如,某些文件可能会直接在浏览器中打开,而不是下载。这是由浏览器对特定 MIME 类型的处理决定的,无法通过代码控制。

  • 服务器的配置:如果服务器没有正确设置 Content-Disposition 头部,或者对某些文件类型没有指定 MIME 类型,可能会导致文件下载或命名不正确。因此,确保服务器正确配置是关键。🚀


相关文章:

JavaScript 的 axios 实现文件下载功能

用 JavaScript 的 axios 实现文件下载功能&#xff0c;咱们要分几个步骤来搞定它&#xff01;最主要的部分是处理 二进制数据&#xff0c;可以生成一个进度检测&#xff0c;然后把它保存为文件。 文件名的获取二进制数据获取创建下载链接 const axios require(axios);const g…...

合合信息亮相2024中国模式识别与计算机视觉大会,用AI构建图像内容安全防线

近日&#xff0c;第七届中国模式识别与计算机视觉大会&#xff08;简称“PRCV 2024”&#xff09;在乌鲁木齐举办。大会由中国自动化学会&#xff08;CAA&#xff09;、中国图象图形学学会&#xff08;CSIG&#xff09;、中国人工智能学会&#xff08;CAAI&#xff09;和中国计…...

深度学习:匿名函数lambda函数的使用与numerical_gradient函数

背景&#xff1a; 假设我们有一个简单的线性回归模型&#xff0c;其损失函数是均方误差&#xff08;MSE&#xff09;&#xff1a; class LinearModel:def __init__(self):self.W np.random.randn(1, 1) # 初始化权重def predict(self, x):return np.dot(x, self.W) # 线性预…...

PHP数据类型

几种常用的数据类型&#xff1a; String&#xff08;字符串&#xff09; Integer&#xff08;整型&#xff09; Float&#xff08;浮点型&#xff09; Boolean&#xff08;布尔型&#xff09; NULL&#xff08;空值&#xff09; Array&#xff08;数组&#xff09; Obje…...

2FA-双因素认证

双因素认证&#xff08;2FA&#xff0c;Two-Factor Authentication&#xff09;是一种提高安全性的方法&#xff0c;要求用户在登录或进行某些敏感操作时提供两种不同类型的身份验证信息。这种方法通过引入第二层验证&#xff0c;增加了账户被未经授权访问的难度。 项目结构 …...

解决 Python 中的 TypeError 错误

解决 Python 中的 TypeError 错误 在 Python 编程中&#xff0c;TypeError 是一种常见的错误&#xff0c;通常发生在尝试对不兼容的类型进行操作时。了解这个错误的原因以及如何有效解决它&#xff0c;对于提高代码的可靠性和可读性至关重要。本文将详细讨论 TypeError 的成因…...

快速学会C 语言基本概念和语法结构

&#x1f600;前言 本篇博文是关于C 语言的基本概念和语法结构&#xff0c;希望你能够喜欢 &#x1f3e0;个人主页&#xff1a;晨犀主页 &#x1f9d1;个人简介&#xff1a;大家好&#xff0c;我是晨犀&#xff0c;希望我的文章可以帮助到大家&#xff0c;您的满意是我的动力&a…...

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

目录 一、用法精讲 791、pandas.UInt8Dtype类 791-1、语法 791-2、参数 791-3、功能 791-4、返回值 791-5、说明 791-6、用法 791-6-1、数据准备 791-6-2、代码示例 791-6-3、结果输出 792、pandas.UInt16Dtype类 792-1、语法 792-2、参数 792-3、功能 792-4、…...

Linux系统下minio设置SSL证书进行HTTPS远程连接访问

文章目录 1.配置SSL证书使用HTTPS访问2.MINIO SDK 忽略证书验证3.使用受信任的证书 1.配置SSL证书使用HTTPS访问 生成域名对应的SSL证书&#xff0c;下载Apache版本&#xff0c;我目前只发现Apache这个里面有对应的私钥和证书 私钥重命名为private.key证书重命名为public.crt&…...

npm 包的命名空间介绍,以及@typescript-eslint/typescript-eslint

npm 包的命名空间是一个重要的概念&#xff0c;用于组织和管理相关的包。通过命名空间&#xff0c;开发者可以避免命名冲突、增强包的可读性和可维护性。以下是关于 npm 命名空间的详细介绍&#xff0c;并以 typescript-eslint 作为示例。 1. 命名空间的结构 命名空间的格式为…...

ecovadis评估是什么,有什么提成自己评分等级

EcoVadis评估是一个企业社会责任&#xff08;CSR&#xff09;评级平台&#xff0c;旨在评估全球供应链的可持续性和道德情况。以下是对EcoVadis评估的详细介绍以及提升其评分等级的方法&#xff1a; 一、EcoVadis评估概述 定义&#xff1a;EcoVadis评估通过一系列框架评估公司…...

Vue3中ref、toRef和toRefs之间有什么区别?

前言 Vue 3 引入了组合式 API&#xff0c;其中 ref、toRef 和 toRefs 是处理响应式数据的核心工具。作为高级计算机工程师&#xff0c;我们有必要深入理解这些工具的细微差别&#xff0c;以便在实际项目中更加高效地管理状态。本文将详细解析 ref、toRef 和 toRefs 的区别&…...

react开发技巧

/* eslint-disable no-useless-escape */ const Validator { isEmail: /^([a-zA-Z0-9_\.\-])\(([a-zA-Z0-9\-])\.)([a-zA-Z0-9]{2,4})$/, // 校验邮箱 isPhoneNumber: /^1[3456789]\d{9}$/, // 手机号码验证 isMobileNumber: /^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/, //…...

HarmonyOS第一课——HarmonyOS介绍

HarmonyOS第一课 HarmonyOS介绍 HarmonyOS是新一代的智能终端操作系统&#xff08;泛终端服务的载体&#xff09;&#xff1b; 智慧互联协同&#xff0c;全场景交互体验&#xff1b; 核心技术理念&#xff1a; 一次开发 多次部署&#xff1a; 预览 可视化开发UI适配 事件交…...

XCode16中c++头文件找不到解决办法

XCode16中新建Framework&#xff0c;写完自己的c代码后&#xff0c;提示“<string> file not found”等诸如此类找不到c头文件的错误。 工程结构如下&#xff1a; App是测试应用&#xff0c;BoostMath是Framework。基本结构可以参考官方demo&#xff1a;Mix Swift and …...

CSS - 保姆级面试基础扫盲版本一

盒子模型 盒子模型定义&#xff1a; 当对一个盒子模型进行文档布局的时候&#xff0c;浏览器的渲染引擎会根据标准之一的CSS盒子模型&#xff08;CSS basic box model&#xff09;&#xff0c;将所有元素表示成一个个矩阵盒子。 一个盒子通常由四部分组成&#xff1a;border p…...

51c自动驾驶~合集2

我自己的原文哦~ https://blog.51cto.com/whaosoft/11491137 #BEVWorld BEV潜在空间构建多模态世界模型&#xff0c;全面理解自动驾驶~一、引言 世界模型建模了有关环境的知识&#xff0c;其可以通过给定的条件对未来进行合理的想象。未来想象要求世界模型具有物理规律的理解…...

Redis后台任务有哪些

Redis后台任务 为了有更好的性能表现&#xff0c;redis对于一些比较耗时的操作会异步执行&#xff0c;不阻塞线上请求。文章从源码(redis7.0)来看&#xff0c;aof、rdb文件的关闭&#xff0c;aof文件的刷盘以及部分内存释放会采用异步方式&#xff0c;在后台线程中执行。接下来…...

TPair<TKey, TValue> 键值对

在 Delphi&#xff08;或更准确地说是 Object Pascal&#xff0c;Delphi 的编程语言&#xff09;中&#xff0c;TList<T> 是泛型列表的一个实现&#xff0c;其中 T 是列表中元素的类型。TPair<TKey, TValue> 是一个包含两个元素的记录&#xff08;record&#xff0…...

【杂谈】城市规划教育的危与机

城市规划教育的危与机 &#xff08;赵燕菁 原文为作者在 第21届中国城市规划学科发展论坛上的发言&#xff0c;有删减和改动&#xff09;如有侵权&#xff0c;立即删除 过去几年&#xff0c;尤其是从2022年后房地产市场的下行开始&#xff0c;中国的城市规划陷入前所未有的危…...

日语AI面试高效通关秘籍:专业解读与青柚面试智能助攻

在如今就业市场竞争日益激烈的背景下&#xff0c;越来越多的求职者将目光投向了日本及中日双语岗位。但是&#xff0c;一场日语面试往往让许多人感到步履维艰。你是否也曾因为面试官抛出的“刁钻问题”而心生畏惧&#xff1f;面对生疏的日语交流环境&#xff0c;即便提前恶补了…...

理解 MCP 工作流:使用 Ollama 和 LangChain 构建本地 MCP 客户端

&#x1f31f; 什么是 MCP&#xff1f; 模型控制协议 (MCP) 是一种创新的协议&#xff0c;旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议&#xff0c;它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...

UDP(Echoserver)

网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法&#xff1a;netstat [选项] 功能&#xff1a;查看网络状态 常用选项&#xff1a; n 拒绝显示别名&#…...

汽车生产虚拟实训中的技能提升与生产优化​

在制造业蓬勃发展的大背景下&#xff0c;虚拟教学实训宛如一颗璀璨的新星&#xff0c;正发挥着不可或缺且日益凸显的关键作用&#xff0c;源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例&#xff0c;汽车生产线上各类…...

数据链路层的主要功能是什么

数据链路层&#xff08;OSI模型第2层&#xff09;的核心功能是在相邻网络节点&#xff08;如交换机、主机&#xff09;间提供可靠的数据帧传输服务&#xff0c;主要职责包括&#xff1a; &#x1f511; 核心功能详解&#xff1a; 帧封装与解封装 封装&#xff1a; 将网络层下发…...

高效线程安全的单例模式:Python 中的懒加载与自定义初始化参数

高效线程安全的单例模式:Python 中的懒加载与自定义初始化参数 在软件开发中,单例模式(Singleton Pattern)是一种常见的设计模式,确保一个类仅有一个实例,并提供一个全局访问点。在多线程环境下,实现单例模式时需要注意线程安全问题,以防止多个线程同时创建实例,导致…...

R语言速释制剂QBD解决方案之三

本文是《Quality by Design for ANDAs: An Example for Immediate-Release Dosage Forms》第一个处方的R语言解决方案。 第一个处方研究评估原料药粒径分布、MCC/Lactose比例、崩解剂用量对制剂CQAs的影响。 第二处方研究用于理解颗粒外加硬脂酸镁和滑石粉对片剂质量和可生产…...

基于IDIG-GAN的小样本电机轴承故障诊断

目录 🔍 核心问题 一、IDIG-GAN模型原理 1. 整体架构 2. 核心创新点 (1) ​梯度归一化(Gradient Normalization)​​ (2) ​判别器梯度间隙正则化(Discriminator Gradient Gap Regularization)​​ (3) ​自注意力机制(Self-Attention)​​ 3. 完整损失函数 二…...

CSS | transition 和 transform的用处和区别

省流总结&#xff1a; transform用于变换/变形&#xff0c;transition是动画控制器 transform 用来对元素进行变形&#xff0c;常见的操作如下&#xff0c;它是立即生效的样式变形属性。 旋转 rotate(角度deg)、平移 translateX(像素px)、缩放 scale(倍数)、倾斜 skewX(角度…...

Python Einops库:深度学习中的张量操作革命

Einops&#xff08;爱因斯坦操作库&#xff09;就像给张量操作戴上了一副"语义眼镜"——让你用人类能理解的方式告诉计算机如何操作多维数组。这个基于爱因斯坦求和约定的库&#xff0c;用类似自然语言的表达式替代了晦涩的API调用&#xff0c;彻底改变了深度学习工程…...