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 类型,可能会导致文件下载或命名不正确。因此,确保服务器正确配置是关键。🚀


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

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

相关文章

【视频生成大模型】 视频生成大模型 THUDM/CogVideoX-2b

【视频生成大模型】 视频生成大模型 THUDM/CogVideoX-2b CogVideoX-2b 模型介绍发布时间模型测试生成的demo视频生成视频限制 运行环境安装运行模型下载开源协议参考 CogVideoX-2b 模型介绍 CogVideoX是 清影 同源的开源版本视频生成模型。 基础信息&#xff1a; 发布时间 2…

【【自动驾驶】车辆运动学模型】

【自动驾驶】车辆运动学模型 1. 引言2. 以车辆重心为中心的单车模型2.1 模型介绍2.2 滑移角 β \beta β 的推导2.2 航向角 ψ \psi ψ推导过程&#xff1a;2.3 滑移角 β \beta β2.3 Python代码实现2.4 C代码实现 3. 前轮驱动的单车模型3.1 模型介绍3.3 Python代码实现3.4 …

【功能安全】 独立于环境的安全要素SEooC

目录 01 SEooC定义 02 SEooC开发步骤 03 SEooC开发示例 04 SEooC问答 01 SEooC定义 缩写: SEooC:Safety Element out of Context独立于环境的安全要素 SEooC出处:GB/T34590.10—2022,第9章节 SEooC与相关项什么关系? SEooC可以是系统、系统组合、子系统、软件组件、…

【软件设计】常用设计模式--代理模式

文章目录 代理模式&#xff08;Proxy Pattern&#xff09;1. 概念2. 模式结构3. UML 类图4.实现方式C# 示例步骤1&#xff1a;定义主题接口步骤2&#xff1a;实现真实主题步骤3&#xff1a;实现代理类步骤4&#xff1a;客户端使用代理模式输出结果&#xff1a; Java 示例步骤1&…

EXCELL中如何两条线画入一张图中,标记坐标轴标题?

1&#xff0c;打开excel&#xff0c;左击选中两列&#xff0c; 2&#xff0c;菜单栏>“插入”>”二维折线图”选中一个 3&#xff0c;选中出现的两条线中的一条右击>最下一行&#xff0c;“设置数据系列格式” 4&#xff0c;右测“系列选项中”>点击“次坐标轴” 5…

龙蟠科技业绩压力显著:资产负债率持续攀升,产能利用率也不乐观

《港湾商业观察》施子夫 黄懿 去年十月至今两度递表后&#xff0c;10月17日&#xff0c;江苏龙蟠科技股份有限公司(以下简称&#xff0c;龙蟠科技&#xff1b;603906.SH&#xff0c;02465.HK)通过港交所主板上市聆讯。 很快&#xff0c;龙蟠科技发布公告称&#xff0c;公司全…

低代码开发详解与行业应用指南

低代码开发简化软件开发&#xff0c;助力企业数字化转型。ZohoCreator应用于零售、制造、教育、IT、医疗、房地产等行业&#xff0c;提升效率、降低成本。灵活定价&#xff0c;支持免费试用&#xff0c;助力企业快速实现数字化。 一、低代码开发是什么&#xff1f; 低代码开发…

青少年编程能力等级测评CPA C++五级试卷(1)

青少年编程能力等级测评CPA C五级试卷&#xff08;1&#xff09; 一、单项选择题&#xff08;共15题&#xff0c;每题3分&#xff0c;共45分&#xff09; CP5_1_1.下列有关类的重用意义的叙述中&#xff0c;不正确的是&#xff08; &#xff09;。 A&#x…

栈(数据结构)——C语言

1 概念与结构 栈&#xff1a;⼀种特殊的线性表&#xff0c;其只允许在固定的⼀端进⾏插⼊和删除元素操作。进⾏数据插⼊和删除操作 的⼀端称为栈顶&#xff0c;另⼀端称为栈底。栈中的数据元素遵守后进先出LIFO&#xff08;Last In First Out&#xff09;的原则。 压栈&#…

如何动态改变本地的ip

在当今数字化时代&#xff0c;网络连接已成为我们日常生活和工作中不可或缺的一部分。无论是出于隐私保护、突破地域限制&#xff0c;还是为了测试和优化网络应用&#xff0c;动态改变本地IP地址的需求日益增多。本文将详细介绍如何安全、有效地实现这一目标&#xff0c;旨在帮…

Linux巡检利器xsos的安装和使用

一、 一般项目基本完成的时候&#xff0c;后期运维工作的重点就是及时的&#xff0c;合理的频率巡检了&#xff0c;巡检的目的主要是及时发现各种各样的问题 那么&#xff0c;自己编写shell脚本是大部分人的第一选择&#xff0c;这里有个比较麻烦的地方&#xff0c;shell脚本…

升级phpcmsV9系统的jquery版本引起的问题处理

前言&#xff1a; 如果jquery文件名修改了&#xff0c;/phpcms/modules/admin/templates/header.tpl.php文件中的jquery名称需要对应修改 一、后台输入框的验证问题 /statics/js/formvalidator.js文件调整为&#xff1a;点击下载 二、后台全选失效问题 1、/phpcms/modules/…

通过 Lighthouse 和 speed-measure-webpack 插件分析优化构建速度与体积

一、Lighthouse Lighthouse是 Google Chrome 推出的一款开源自动化工具&#xff0c;谷歌浏览器中已经集成&#xff0c;它可以搜集多个现代网页性能指标&#xff0c;分析 Web 应用的性能并生成报告&#xff0c;为开发人员进行性能优化的提供了参考方向。 Lighthouse会生成一份报…

Aatrox-Bert-VITS2部署指南

一、模型介绍 【AI 剑魔 ①】在线语音合成&#xff08;Bert-Vits2&#xff09;&#xff0c;将输入文字转化成暗裔剑魔亚托克斯音色的音频输出。 作者&#xff1a;Xz 乔希 https://space.bilibili.com/5859321 声音归属&#xff1a;Riot Games《英雄联盟》暗裔剑魔亚托克斯 …

分布式IO模拟量模块:多领域应用的高效能解决方案

分布式IO模拟量模块是分布式IO系统中的重要组件&#xff0c;用于实现现场设备或过程的模拟量信号的采集、监视和控制。该模块通常与现场总线耦合器配合使用&#xff0c;能够接收来自现场设备的模拟量信号&#xff08;如电流、电压等&#xff09;&#xff0c;并将其转换为数字信…

谷歌地图 | 与 Android 版导航 SDK 集成的最佳实践

谷歌最近宣布了导航 SDK&#xff0c;它可以让您将熟悉的 Google 地图逐向导航体验无缝集成到您的 Android 和 iOS 应用程序中。 这篇博文概述了一些最佳实践&#xff0c;您可以使用这些实践为您的 Android 应用程序使用导航 SDK 构建流畅、一致且可靠的导航体验。 与导航地图…

Linux系统安装软件的4种方式【源码配置编译安装、yum安装、rpm包安装、二进制软件包安装(.rpm/.tar.gz/.tgz/.bz2)】

一.源码安装 linux安装软件采用源码安装灵活自由&#xff0c;适用于不同的平台&#xff0c;维护也十分方便。 &#xff08;一&#xff09;源码安装流程  源码的安装一般由3个步骤组成&#xff1a; 1.配置&#xff08;configure&#xff09; Configure是一个可执行脚本…

5586 直播获奖(live)

经验值&#xff1a;1200 时间限制&#xff1a;1000毫秒 内存限制&#xff1a;256MB 全国2020CSP-J普及组试题 不许抄袭&#xff0c;一旦发现&#xff0c;直接清空经验&#xff01; 题目描述 Description NOI2130 即将举行。为了增加观赏性&#xff0c;CCF 决定逐一评出每个…

YOLOv11在目标检测中的应用及其与PaddleDetection的对比

近年来&#xff0c;目标检测模型在诸如自动驾驶、安全监控等应用中发挥了关键作用。众多模型中&#xff0c;YOLO&#xff08;You Only Look Once&#xff09; 系列凭借其在速度和精度之间的良好平衡脱颖而出。YOLOv11 作为该系列的最新版本之一&#xff0c;凭借其多项创新&…

Vue.js 入门教程

Vue.js 入门教程 一、引言 Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架。与其他重量级框架不同&#xff0c;Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层&#xff0c;并且非常容易上手&#xff0c;同时也很容易与其他库或已有项目整合。本文将引导…