关于后台数据文件流的下载及导出

当需要请求相关接口或者是 url 时，后端返回文件流的形式供前端下载，导出。下面主要介绍8种方式：

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

• 使用该方法在浏览器会新开一个标签页，将后端返回的文件流作为 url 。浏览器会自动下载该文件。
• 例如：window.open(‘http://example.com/download’, ‘_blank’);

2. 使用<a>标签的download属性：

• 使用demo节点创建一个隐藏的<a>标签，设置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属性：

• 创建一个<a>标签，设置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';
// get请求
fetch('http://example.com/download')
  .then(response => response.blob())
  .then(blob => {
    saveAs(blob, 'filename.ext');
  });

 
 

 
 

6. 使用iframe：

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

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

 
 

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

 
 

8. 使用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();
  });

 
 

以上8种实现下载的方式，根据不同的需求选择不同的方式。谢谢点赞。