巧妙应对！从后端下载文件的两种方法

前端从后端下载文件的方法有多种，这里介绍两种最常用的方法：

1. 通过请求接口返回文件路径，直接下载

   这种方法的步骤如下：

   1. 前端发送请求到后端接口，请求参数中包含要下载的文件的名称或路径。
   2. 后端接口处理请求，找到指定的文件，并返回文件的路径。
   3. 前端收到后端返回的文件路径，使用window.location.href属性设置下载链接，然后点击链接即可下载文件。

// 请求后端接口，获取文件路径
fetch('/api/download-file', {
  method: 'POST',
  body: JSON.stringify({
    filename: 'file.txt',
  }),
}).then((response) => {
  // 将后端返回的文件路径赋值给变量
  const filePath = response.data.filePath;

  // 创建下载链接
  const downloadLink = document.createElement('a');
  downloadLink.href = filePath;
  downloadLink.download = 'file.txt';

  // 点击下载链接，下载文件
  downloadLink.click();
});

2. 通过请求接口返回文件流，前端再下载到本地

   这种方法的步骤如下：

   1. 前端发送请求到后端接口，请求参数中包含要下载的文件的名称或路径。
   2. 后端接口处理请求，找到指定的文件，并以文件流的形式返回给前端。
   3. 前端收到后端返回的文件流，使用FileReader对象读取文件流，然后将其保存到本地。

// 请求后端接口，获取文件流
fetch('/api/download-file', {
  method: 'POST',
  body: JSON.stringify({
    filename: 'file.txt',
  }),
}).then((response) => {
  // 将后端返回的文件流赋值给变量
  const fileStream = response.data.fileStream;

  // 创建FileReader对象，读取文件流
  const reader = new FileReader();
  reader.onload = function() {
    // 文件流读取完成，将结果保存到本地
    const data = reader.result;
    const blob = new Blob([data], { type: 'text/plain' });
    const downloadLink = document.createElement('a');
    downloadLink.href = URL.createObjectURL(blob);
    downloadLink.download = 'file.txt';
    downloadLink.click();
  };
  reader.readAsText(fileStream);
});

这两种方法都可以实现从后端下载文件的功能，但第二种方法可以实现更多的功能，比如下载进度条等。您可以根据自己的需求选择合适的方法。