文件下载大坑：axios 文件下载爬坑记录

2024-02-27 21:01:03

在最近的项目开发中，我遇到了一个棘手的文件下载问题，使用 axios 时文件下载后无法在本地打开，提示文件已损坏。这让我颇感困惑，因为在 Postman 中直接调用 API 下载文件却是正常的。经过一番深入调查，我终于找到了解决方案，特此记录分享，希望能帮助遇到类似问题的小伙伴。

问题根源

起初，我按照惯例使用 axios 的 responseType 选项，将其设置为 arraybuffer，希望以二进制形式接收文件。然而，这种方法在浏览器中并不能正常工作。当浏览器接收到二进制数据时，它会尝试将其解释为 HTML 或其他文本格式，导致文件损坏。

解决方案

为了解决这个问题，需要将 responseType 设置为 "blob"。Blob 是一种文件对象，包含二进制数据，但不会被浏览器解释为文本。通过将 responseType 设置为 "blob"，我们可以接收文件内容的原始二进制形式。

axios({
  url: '/download/file.pdf',
  method: 'get',
  responseType: 'blob',
}).then(response => {
  // 处理 blob 数据
});

读取 Blob 内容

获取 Blob 数据后，我们需要使用 FileReader 来读取其内容。FileReader 是一个浏览器内置对象，可以将 Blob 数据转换为可读格式，如字符串或 ArrayBuffer。

const fileReader = new FileReader();
fileReader.onload = function() {
  // 读取成功后的处理逻辑
};
fileReader.readAsArrayBuffer(blob);

示例代码

为了更直观地展示解决方案，提供了一个示例代码片段：

const downloadFile = (url) => {
  axios({
    url: url,
    method: 'get',
    responseType: 'blob',
  }).then(response => {
    const fileReader = new FileReader();
    fileReader.onload = function() {
      const arrayBuffer = fileReader.result;
      // 处理 arrayBuffer 数据
    };
    fileReader.readAsArrayBuffer(response.data);
  });
};