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

JavaScript 的 axios 实现文件下载功能

news 2025/9/14 14:26:25

用 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 提取文件名，最后可以提供一个默认文件名作为兜底方案。此外，考虑到代码可读性和可维护性，上面代码做一些清晰的封装与优化处理。

文件名获取逻辑封装：
- getFileNameFromContentDisposition：专门用于从 Content-Disposition 头部提取文件名，使用正则匹配，考虑了有引号和没有引号的情况。
- getFileNameFromUrl：用于从 URL 提取文件名，确保从路径最后一部分获取到文件名。
- 优先级：先从 Content-Disposition 获取文件名，如果没有，再从 URL 提取，最后使用默认文件名。
默认文件名：
- 提供了 defaultFileName 参数，确保当无法从响应头和 URL 获取文件名时，仍然有一个合理的文件名用于下载。
异常处理：
- 使用 try-catch 包围整个下载过程，确保即使出现网络或其他问题，错误也能被捕获并输出到控制台，而不会影响页面的其他功能。
内存管理：
- 确保 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.lryc.cn/news/471419.html