强制下载文件：使用 Axios 的终极指南

2024-03-07 19:52:03

使用 Axios 强制下载文件：终极指南

简介

在现代 Web 开发中，使用 Axios 进行异步 HTTP 请求已变得至关重要。然而，当需要强制下载文件时，例如 PDF 文件，标准的 Axios 请求可能会遇到困难。本指南将深入探讨在使用 Axios 时强制下载文件的方法，并提供分步说明和代码示例。

问题：无法强制下载

当使用 Axios 进行 GET 请求时，即使服务器返回了正确的响应头，也可能无法强制下载文件。这是因为 Axios 默认为 "text" 响应类型，这适用于字符串数据，但不适用于二进制文件。

解决方案：1. 使用 XHR 对象

**子
一种方法是使用 XMLHttpRequest (XHR) 对象，它提供了更细粒度的控制。通过以下步骤可以实现：

创建一个新的 XHR 对象
设置请求类型和端点
设置响应类型为 "arraybuffer"，以接收二进制数据
在 "onload" 事件处理程序中，将响应转换为 Blob 对象，并创建指向它的 URL
创建一个链接元素，将 URL 设置为 Blob 对象的 URL，并将下载属性设置为所需的文件名
点击链接元素以启动下载

代码示例：

let xhr = new XMLHttpRequest();
xhr.open('GET', 'file.pdf');
xhr.responseType = 'arraybuffer';
xhr.onload = () => {
  let blob = new Blob([xhr.response], { type: 'application/pdf' });
  let url = window.URL.createObjectURL(blob);
  let link = document.createElement('a');
  link.href = url;
  link.download = 'file.pdf';
  link.click();
};
xhr.send();

解决方案：2. 使用 Axios 自定义处理

**子
使用 Axios 时，可以通过以下步骤创建自定义解决方案：

发出 Axios POST 请求，将响应类型设置为 "arraybuffer"
将响应数据转换为 Blob 对象
创建一个指向 Blob 对象的 URL
根据需要在页面中使用链接、iframe 或其他方法打开 URL 以启动下载

代码示例：

axios.post('file.pdf', { responseType: 'arraybuffer' })
  .then(response => {
    let blob = new Blob([response.data], { type: 'application/pdf' });
    let url = window.URL.createObjectURL(blob);
    // 使用链接、iframe 或其他方法打开 URL
  });