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

JavaScript 的 axios 实现文件下载功能

article 2025/1/21 22:12:16

用 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 URL
    const 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 URL
    window.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.kler.cn/a/370309.html