文件流的操作王者——完美处理后端接口返回的文件流

<a href="https://example.com/report.pdf" download>下载报告</a>

简单吧？

2. 绝技二：window.open() 打开新窗口

window.open("https://example.com/login", "_blank");

登录成功后，再在窗口中打开下载链接即可。

二、酷炫预览，足不出户

1. 绝招一：FileReader API 驾到

想在浏览器中预览一个文件，FileReader API 就是你的好帮手。这个 API 允许你读取文件的内容，并将其转换为可供浏览器显示的格式。比如，你想预览名为 image.jpg 的图片，可以使用以下代码：

const reader = new FileReader();
reader.onload = function() {
  document.getElementById("image").src = reader.result;
};
reader.readAsDataURL(image);

这样，图片就会显示在名为 image 的元素中。

2. 绝招二：Blob URL 一键预览

如果你的浏览器不支持 FileReader API，或者你想预览一个二进制文件，比如 PDF 文档，那么 Blob URL 就是你的救星。Blob URL 是一个特殊的 URL，它可以指向一个二进制文件，并允许浏览器直接预览该文件。比如，你想预览名为 report.pdf 的 PDF 文档，可以使用以下代码：

const blob = new Blob([file], { type: "application/pdf" });
const url = URL.createObjectURL(blob);
document.getElementById("pdf").src = url;

这样，PDF 文档就会显示在名为 pdf 的元素中。

结语

各位前端界的英雄们，这就是处理文件流的两种骚操作了，怎么样，是不是很简单？赶快去试试吧！如果还有其他问题，欢迎在评论区留言，我会一一解答。

常见问题解答