一种巧妙解决Chrome不支持带下载header的pdf文件预览解决方法
本文由 小茗同学 发表于 2018-11-02 浏览(12539)
最后修改 2023-02-02 标签:pdf 预览 chrome

已知

已知带有content-disposition头部的pdf文件在Chrome下是无法预览的,验证步骤如下:

假设有如下2个pdf文件,文件a.pdf的Header中有content-disposition字段:

content-disposition: attachment; filename="a.pdf"
content-length: 831639
content-type: application/pdf

文件b.pdf没有content-disposition字段:

content-length: 831639
content-type: application/pdf

展示代码如下:

<object data="xxx.pdf" type="application/pdf"></object>

发现,同样的pdf文件,带有content-disposition头部的无法预览:

不带的可以正常预览:

解决

之前想着是后端增加一个参数,当传了某个参数时就不返回这个header,但是这需要后端配合,如何不需要后端介入前端就能实现呢?

一种巧妙的思路是,先用fetch下载下来拿到blob对象,然后再用URL.createObjectURL生成临时URL,然后就可以预览啦,代码如下:

fetch('xxx.pdf').then(resp => resp.blob()).then(blob => {
	var url = URL.createObjectURL(blob);
	document.querySelector('object').data = url;
});