轻松搞定文件下载：后端url直达本地，自定义文件名，一气呵成！

2023-01-07 16:53:46

在前端开发过程中，从后端获取文件并将其下载到本地是一个常见的需求。开发者经常会遇到如何处理文件下载 URL 和设置文件下载名称的问题。本文将详细介绍如何通过前端代码实现从后端 URL 下载文件并自定义文件下载名称的功能。

步骤 1：获取后端返回的 URL

首先，我们需要获取后端返回的文件 URL。假设后端返回的文件 URL 保存在变量 fileUrl 中：

const fileUrl = 'https://example.com/file.pdf';

步骤 2：创建用于下载的 a 标签

接下来，我们创建一个 a 标签，并将 href 属性设置为 fileUrl：

const downloadLink = document.createElement('a');
downloadLink.href = fileUrl;

步骤 3：设置文件下载名称

然后，我们设置 a 标签的 download 属性，指定下载后的文件名：

downloadLink.download = 'custom-file-name.pdf';

步骤 4：模拟点击 a 标签，触发文件下载

最后，我们使用 click() 方法模拟点击 a 标签，触发文件下载：

downloadLink.click();

步骤 5：释放内存

为了防止内存泄漏，我们可以释放 fileUrl 对象：

URL.revokeObjectURL(fileUrl);

通过这些步骤，您可以轻松实现从后端 URL 下载文件并自定义文件下载名称的功能。

扩展阅读：下载状态跟踪和进度条

为了让下载过程更加友好，您可以添加下载状态跟踪和进度条功能。这里提供两种方法：

1. 使用 XMLHttpRequest（XHR）

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

xhr.onload = function() {
  if (xhr.status === 200) {
    // 文件下载成功
    const blob = xhr.response;
    const url = URL.createObjectURL(blob);
    const downloadLink = document.createElement('a');
    downloadLink.href = url;
    downloadLink.download = 'custom-file-name.pdf';
    downloadLink.click();

    // 释放内存
    URL.revokeObjectURL(url);
  } else {
    // 文件下载失败
    console.error('文件下载失败：', xhr.status);
  }
};

xhr.onprogress = function(e) {
  // 更新进度条
  const progress = e.loaded / e.total * 100;
  console.log('下载进度：', progress, '%');
};

xhr.send();

2. 使用 fetch API

fetch(fileUrl)
  .then(response => {
    if (response.ok) {
      // 文件下载成功
      return response.blob();
    } else {
      // 文件下载失败
      throw new Error('文件下载失败：', response.status);
    }
  })
  .then(blob => {
    const url = URL.createObjectURL(blob);
    const downloadLink = document.createElement('a');
    downloadLink.href = url;
    downloadLink.download = 'custom-file-name.pdf';
    downloadLink.click();

    // 释放内存
    URL.revokeObjectURL(url);
  })
  .catch(error => {
    // 文件下载失败
    console.error('文件下载失败：', error);
  });