已知

已知带有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;
});