如何实现pdf 文件在浏览器里面直接下载而不是打开

272 阅读1分钟

背景

<a> 元素有 download 属性,表示当前链接不是用来浏览的,而是用来下载的。 它的值是一个字符串,表示用户下载得到的文件名。可是对于 PDF 文件,浏览器默认打开一个新的页面加载 PDF 文件,而不会直接下载该文件。

解决方法

将PDF文件的 MIME type 改为 application/octet-stream 并加入 Content-Disposition:attachment header,原本的 pdf 文件 MIME type 为 application/pdf,浏览器识别到这个 type 之后会自动在浏览器打开,所以说我们在这里修改 type 即可。

后端增加文件的响应头**Content-Disposition** 为attachment
前端: <a href='url' download></a>

Content-Disposition

在常规的 HTTP 应答中,Content-Disposition 响应标头指示回复的内容该以何种形式展示,是以内联的形式(即网页或者页面的一部分),还是以附件的形式下载并保存到本地。

Content-Disposition - HTTP | MDN (mozilla.org)