后端返回文件流，前端怎么导出、下载

1.在前端导出和下载后端返回的文件流时，可以使用以下几种方法：

使用window.open()方法：

在前端使用window.open()方法打开一个新的窗口或标签页，并将后端返回的文件流作为URL传递给该方法。浏览器会自动下载该文件。

例如：window.open(‘ , ‘_blank’);

使用标签的download属性：

2.创建一个隐藏的标签，设置href属性为后端返回的文件流的URL，同时设置download属性为文件的名称。然后使用JavaScript模拟点击该标签，触发文件下载。

例如：

const link = document.createElement('a');
link.href = 'http://example.com/download';
link.download = 'filename.ext';
link.click();

3.使用Fetch API或XHR请求：

• 使用Fetch API或XHR（XMLHttpRequest）发送请求，获取后端返回的文件流，并使用Blob对象创建一个URL。然后将该URL传递给 <a> 标签的 href 属性，并使用JavaScript模拟点击该标签，触发文件下载。

• 例如：

• fetch('http://example.com/download')
    .then(response => response.blob())
    .then(blob => {
      const url = URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.href = url;
      link.download = 'filename.ext';
      link.click();
    });

  这些方法可以根据具体的需求和项目环境选择使用。需要注意的是，后端返回的文件流需要正确设置Content-Disposition响应头，以指定文件的名称和下载方式。

  除了上述提到的方法，还有以下五种方法可以实现前端导出和下载后端返回的文件流：

4.使用HTML5的download属性：

• 创建一个标签，设置href属性为后端返回的文件流的URL，同时设置download属性为文件的名称。将该标签插入到DOM中，并使用JavaScript模拟点击该标签，触发文件下载。

  例如：

const link = document.createElement('a');
link.href = 'http://example.com/download';
link.download = 'filename.ext';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);

5.FileSaver.js库：

• 引入FileSaver.js库，使用 saveAs() 方法将后端返回的文件流保存为本地文件。需要将后端返回的文件流转换为Blob对象。
• 例如：

import { saveAs } from 'file-saver';

fetch('http://example.com/download')
  .then(response => response.blob())
  .then(blob => {
    saveAs(blob, 'filename.ext');
  });

使用iframe：

• 创建一个隐藏的iframe，将其 src 属性设置为后端返回的文件流的URL。浏览器会自动下载该文件。
• 例如：