前端页面附件预览：png 下载，pdf 在线查看，如何绕过浏览器默认行为

1. 原因分析：

浏览器默认会将一些文件类型直接下载，而不是在浏览器中打开，例如 'png' 文件。而 'pdf' 文件可以在浏览器中查看是因为浏览器内置了 'pdf' 阅读器插件。

2. 解决方案：

• 对于 'png' 文件类型，可以通过调整 HTTP 响应头来实现在浏览器中查看。设置 'Content-Disposition' 响应头的值为 'inline'，例如：

Content-Disposition: inline; filename=image.png

这样浏览器就会将该文件在浏览器中打开，而不是直接下载。

• 对于 'pdf' 文件类型，可以使用浏览器内置的 'pdf' 阅读器插件直接在浏览器中打开。如果浏览器没有内置 'pdf' 阅读器，可以通过引入第三方 'pdf' 阅读器插件实现。

3. 前端页面实现：

前端页面可以在页面中嵌入 'pdf' 文件，例如使用 'iframe' 标签来嵌入 'pdf' 文件：

<iframe src='example.pdf'></iframe>

这样在浏览器中就可以直接在页面中查看 'pdf' 文件。但是需要注意的是，如果浏览器没有内置 'pdf' 阅读器，需要用户手动下载并安装 'pdf' 阅读器插件才能查看。