后端返回URL，前端下载文件-请这样做！

在后端提供 URL 时实现前端文件下载

摘要：

当后端响应返回一个 URL 时，前端应用程序需要下载文件，有几种方法可以实现此功能。本文将探讨使用 Fetch API、XMLHttpRequest、Blob 对象和 a 标签来实现前端文件下载的各种方法。

1. 使用 Fetch API

Fetch API 是现代浏览器提供的用于发送网络请求的 API。我们可以使用它发送 GET 请求到后端提供的 URL，然后将返回的数据流保存到本地文件中。

fetch(url)
  .then(response => response.blob())
  .then(blob => {
    const a = document.createElement('a');
    a.href = URL.createObjectURL(blob);
    a.download = 'filename.txt';
    a.click();
  });

2. 使用 XMLHttpRequest

XMLHttpRequest 是老版本浏览器中用于发送网络请求的 API。它也可以用于下载文件。

const xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'blob';

xhr.onload = function() {
  if (xhr.status === 200) {
    const blob = xhr.response;
    const a = document.createElement('a');
    a.href = URL.createObjectURL(blob);
    a.download = 'filename.txt';
    a.click();
  }
};

xhr.send();

3. 使用 Blob 对象

Blob 对象表示一个二进制大对象，我们可以使用它来保存从后端返回的数据流。

fetch(url)
  .then(response => response.blob())
  .then(blob => {
    const a = document.createElement('a');
    a.href = URL.createObjectURL(blob);
    a.download = 'filename.txt';
    a.click();
  });

4. 使用 a 标签

a 标签可以用于下载文件，我们可以通过设置 a 标签的 href 属性和 download 属性来实现文件下载功能。

const a = document.createElement('a');
a.href = url;
a.download = 'filename.txt';
a.click();

注意：

• 使用 Fetch API 和 XMLHttpRequest 时，需要在服务端设置 CORS 头，以允许跨域请求。
• 使用 Blob 对象时，需要使用 URL.createObjectURL() 方法将 Blob 对象转换成 URL，然后才能在 a 标签的 href 属性中使用。
• 使用 a 标签时，需要在 a 标签的 download 属性中设置要下载的文件名，否则浏览器会使用默认的文件名。

结论：

我们已经讨论了四种实现前端文件下载功能的方法。根据具体情况，可以选择最合适的方法。在使用 Fetch API 和 XMLHttpRequest 时，需要记住跨域请求的限制。使用 Blob 对象时，需要先将其转换为 URL。最后，使用 a 标签是最直接的方式，但需要设置 download 属性。