ToB企服应用市场:ToB评测及商务社交产业平台

标题: 后端返回文件流，前端怎么导出、下载（8种方法可实现） [打印本页]

---

作者: 锦通    时间: 2024-6-8 22:30
标题: 后端返回文件流，前端怎么导出、下载（8种方法可实现）
在前端导出和下载后端返回的文件流时，可以使用以下几种方法：

• 使用window.open()方法：
  
  
  
  • 在前端使用window.open()方法打开一个新的窗口或标签页，并将后端返回的文件流作为URL通报给该方法。欣赏器会主动下载该文件。
    
  • 例如：window.open('http://example.com/download', '_blank');
    
  
  
• 使用<a>标签的download属性：
  
  
  
  • 创建一个隐藏的<a>标签，设置href属性为后端返回的文件流的URL，同时设置download属性为文件的名称。然后使用JavaScript模拟点击该标签，触发文件下载。
    
  • 例如：
    
  1. const link = document.createElement('a');
  2. link.href = 'http://example.com/download';
  3. link.download = 'filename.ext';
  4. link.click();

  复制代码
  
  
• 使用Fetch API或XHR请求：
  
  
  
  • 使用Fetch API或XHR（XMLHttpRequest）发送请求，获取后端返回的文件流，并使用Blob对象创建一个URL。然后将该URL通报给<a>标签的href属性，并使用JavaScript模拟点击该标签，触发文件下载。
    
  • 例如：
    
  1. fetch('http://example.com/download')
  2.   .then(response => response.blob())
  3.   .then(blob => {
  4.     const url = URL.createObjectURL(blob);
  5.     const link = document.createElement('a');
  6.     link.href = url;
  7.     link.download = 'filename.ext';
  8.     link.click();
  9.   });

  复制代码
  
  

这些方法可以根据具体的需求和项目环境选择使用。必要注意的是，后端返回的文件流必要正确设置Content-Disposition相应头，以指定文件的名称和下载方式。
除了上述提到的方法，另有以下五种方法可以实现前端导出和下载后端返回的文件流：

• 使用HTML5的download属性：
  
  
  
  • 创建一个<a>标签，设置href属性为后端返回的文件流的URL，同时设置download属性为文件的名称。将该标签插入到DOM中，并使用JavaScript模拟点击该标签，触发文件下载。
    
  • 例如：
    
  1. const link = document.createElement('a');
  2. link.href = 'http://example.com/download';
  3. link.download = 'filename.ext';
  4. document.body.appendChild(link);
  5. link.click();
  6. document.body.removeChild(link);

  复制代码
  
  
• 使用FileSaver.js库：
  
  
  
  • 引入FileSaver.js库，使用saveAs()方法将后端返回的文件流生存为本地文件。必要将后端返回的文件流转换为Blob对象。
    
  • 例如：
    
  1. import { saveAs } from 'file-saver';
  3. fetch('http://example.com/download')
  4.   .then(response => response.blob())
  5.   .then(blob => {
  6.     saveAs(blob, 'filename.ext');
  7.   });

  复制代码
  
  
• 使用iframe：
  
  
  
  • 创建一个隐藏的iframe，将其src属性设置为后端返回的文件流的URL。欣赏器会主动下载该文件。
    
  • 例如：
    
  1. const iframe = document.createElement('iframe');
  2. iframe.style.display = 'none';
  3. iframe.src = 'http://example.com/download';
  4. document.body.appendChild(iframe);

  复制代码
  
  
• 使用FormData和XMLHttpRequest：
  
  
  
  • 创建一个FormData对象，将后端返回的文件流作为Blob对象添加到FormData中。然后使用XMLHttpRequest发送请求，将FormData作为请求体发送到后端举行下载。
    
  • 例如：
    
  1. const formData = new FormData();
  2. formData.append('file', blob, 'filename.ext');
  4. const xhr = new XMLHttpRequest();
  5. xhr.open('POST', 'http://example.com/download');
  6. xhr.send(formData);

  复制代码
  
  
• 使用axios库：
  
  
  
  • 使用axios库发送请求，获取后端返回的文件流，并将其生存为本地文件。必要将后端返回的文件流转换为Blob对象。
    
  • 例如：
    
  1. import axios from 'axios';
  3. axios.get('http://example.com/download', { responseType: 'blob' })
  4.   .then(response => {
  5.     const blob = new Blob([response.data]);
  6.     const url = URL.createObjectURL(blob);
  7.     const link = document.createElement('a');
  8.     link.href = url;
  9.     link.download = 'filename.ext';
  10.     link.click();
  11.   });

  复制代码
  
  

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4