前端预览后端返回 html 文件困扰

在调用后端接口获取 html 文件链接后，使用 window.open("链接") 打开时，浏览器却直接下载了文件，并没有如预期地打开进行预览。

问题背后的根源

造成这个问题的原因是浏览器根据服务端的响应头推断文件类型。在默认情况下，html 文件的响应头为：

立即学习“前端免费学习笔记（深入）”；

content-disposition: attachment; filename=file.html
content-type: application/octet-stream

这个响应头指示浏览器将文件下载并保存，而不是在浏览器中打开。

解决方法一：更改响应头

要解决此问题，可以修改后端代码，增加 content-disposition:inline 响应头，这将指示浏览器在浏览器中打开文件。但此方法可能会导致浏览器打开新标签页，而不是在当前标签页中预览。

解决方法二：添加其他响应头

除了解决方法一外，还可以添加 content-type: text/html; charset=utf-8 响应头。这将强制浏览器将文件解释为 html 文档，并在当前标签页中打开。同时，应删除 content-disposition 响应头。

正确的响应头

采用第二种解决方法后的正确响应头如下：

Content-Type: text/html; charset=UTF-8

遵循此设置后，即可在浏览器中预览后端返回的 html 文件。