后端返回文件流，前端怎么导出、下载（8种方法可实现）

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

1. 使用window.open()方法：

   • 在前端使用window.open()方法打开一个新的窗口或标签页，并将后端返回的文件流作为URL传递给该方法。浏览器会自动下载该文件。
   • 例如：window.open('http://example.com/download', '_blank');

   • 使用标签的download属性：

     
     （图片来源网络，侵删）
     • 创建一个隐藏的标签，设置href属性为后端返回的文件流的URL，同时设置download属性为文件的名称。然后使用JavaScript模拟点击该标签，触发文件下载。
     • 例如：

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

     • 使用Fetch API或XHR请求：

       • 使用Fetch API或XHR（XMLHttpRequest）发送请求，获取后端返回的文件流，并使用Blob对象创建一个URL。然后将该URL传递给标签的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响应头，以指定文件的名称和下载方式。

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

1. 使用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);
     

   • 使用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。浏览器会自动下载该文件。
       • 例如：

         const iframe = document.createElement('iframe');
         iframe.style.display = 'none';
         iframe.src = 'http://example.com/download';
         document.body.appendChild(iframe);
         

       • 使用FormData和XMLHttpRequest：

         • 创建一个FormData对象，将后端返回的文件流作为Blob对象添加到FormData中。然后使用XMLHttpRequest发送请求，将FormData作为请求体发送到后端进行下载。
         • 例如：

           const formData = new FormData();
           formData.append('file', blob, 'filename.ext');
           const xhr = new XMLHttpRequest();
           xhr.open('POST', 'http://example.com/download');
           xhr.send(formData);
           

         • 使用axios库：

           • 使用axios库发送请求，获取后端返回的文件流，并将其保存为本地文件。需要将后端返回的文件流转换为Blob对象。
           • 例如：

             import axios from 'axios';
             axios.get('http://example.com/download', { responseType: 'blob' })
               .then(response => {
                 const blob = new Blob([response.data]);
                 const url = URL.createObjectURL(blob);
                 const link = document.createElement('a');
                 link.href = url;
                 link.download = 'filename.ext';
                 link.click();
               });
             

这些方法提供了多种选择来实现前端导出和下载后端返回的文件流。根据具体的需求和项目环境，选择适合的方法进行实现。