将后端返回的文件流转为excel并下载

2024-02-05 15:19:20

在实际的项目开发过程中，可能会遇到需要从后端导出excel文件的情况，此时后端给我们返回的是一个文件流，需要前端将文件流转换成URL地址或者Blob URL进行下载。

使用 URL.createObjectURL() 方法

const blob = new Blob([fileStream]);
const objectURL = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = objectURL;
link.download = 'filename.xlsx';
link.click();
URL.revokeObjectURL(objectURL);

这种方法简单易用，缺点是无法在IE浏览器中使用。

使用 FileSaver.js 库

FileSaver.js 是一个 JavaScript 库，它提供了将文件流保存到本地磁盘的简单方法。
```
FileSaver.saveAs(blob, 'filename.xlsx');
```
这种方法可在所有主流浏览器中使用，包括IE浏览器。

使用 FileReader API

FileReader API 可以将文件流转换成一个字符串，然后可以使用 Blob 构造函数将其转换成一个Blob对象。

const reader = new FileReader();
reader.onload = function() {
  const blob = new Blob([reader.result]);
  const objectURL = URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = objectURL;
  link.download = 'filename.xlsx';
  link.click();
  URL.revokeObjectURL(objectURL);
};
reader.readAsArrayBuffer(fileStream);

这种方法在所有主流浏览器中都可用，但需要注意的是，FileReader API 是异步的，所以需要使用回调函数或 Promise 对象来处理异步操作。

使用 XMLHttpRequest 对象

XMLHttpRequest 对象也可以用来将文件流保存到本地磁盘。

const xhr = new XMLHttpRequest();
xhr.open('GET', '/path/to/file.xlsx');
xhr.responseType = 'blob';
xhr.onload = function() {
  const blob = xhr.response;
  const objectURL = URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = objectURL;
  link.download = 'filename.xlsx';
  link.click();
  URL.revokeObjectURL(objectURL);
};
xhr.send();