当前位置: 首页 > 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;中国的城市规划陷入前所未有的危…...

Linux应用开发之网络套接字编程(实例篇)

服务端与客户端单连接 服务端代码 #include <sys/socket.h> #include <sys/types.h> #include <netinet/in.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <arpa/inet.h> #include <pthread.h> …...

第19节 Node.js Express 框架

Express 是一个为Node.js设计的web开发框架&#xff0c;它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用&#xff0c;和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...

【网络】每天掌握一个Linux命令 - iftop

在Linux系统中&#xff0c;iftop是网络管理的得力助手&#xff0c;能实时监控网络流量、连接情况等&#xff0c;帮助排查网络异常。接下来从多方面详细介绍它。 目录 【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...

Leetcode 3576. Transform Array to All Equal Elements

Leetcode 3576. Transform Array to All Equal Elements 1. 解题思路2. 代码实现 题目链接&#xff1a;3576. Transform Array to All Equal Elements 1. 解题思路 这一题思路上就是分别考察一下是否能将其转化为全1或者全-1数组即可。 至于每一种情况是否可以达到&#xf…...

盘古信息PCB行业解决方案:以全域场景重构,激活智造新未来

一、破局&#xff1a;PCB行业的时代之问 在数字经济蓬勃发展的浪潮中&#xff0c;PCB&#xff08;印制电路板&#xff09;作为 “电子产品之母”&#xff0c;其重要性愈发凸显。随着 5G、人工智能等新兴技术的加速渗透&#xff0c;PCB行业面临着前所未有的挑战与机遇。产品迭代…...

PPT|230页| 制造集团企业供应链端到端的数字化解决方案:从需求到结算的全链路业务闭环构建

制造业采购供应链管理是企业运营的核心环节&#xff0c;供应链协同管理在供应链上下游企业之间建立紧密的合作关系&#xff0c;通过信息共享、资源整合、业务协同等方式&#xff0c;实现供应链的全面管理和优化&#xff0c;提高供应链的效率和透明度&#xff0c;降低供应链的成…...

微信小程序 - 手机震动

一、界面 <button type"primary" bindtap"shortVibrate">短震动</button> <button type"primary" bindtap"longVibrate">长震动</button> 二、js逻辑代码 注&#xff1a;文档 https://developers.weixin.qq…...

python爬虫:Newspaper3k 的详细使用(好用的新闻网站文章抓取和解析的Python库)

更多内容请见: 爬虫和逆向教程-专栏介绍和目录 文章目录 一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...

GitHub 趋势日报 (2025年06月08日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...

ardupilot 开发环境eclipse 中import 缺少C++

目录 文章目录 目录摘要1.修复过程摘要 本节主要解决ardupilot 开发环境eclipse 中import 缺少C++,无法导入ardupilot代码,会引起查看不方便的问题。如下图所示 1.修复过程 0.安装ubuntu 软件中自带的eclipse 1.打开eclipse—Help—install new software 2.在 Work with中…...