如何强制浏览器在新标签页预览PDF而非触发自动下载

浏览器出现这个行为的核心原因是PDF资源的HTTP响应头配置不符合预览要求，和window.open(url, '_blank')写法本身无关，对应解决方法分两类：

1. 服务端配置（根治方案，优先使用） #

给PDF资源返回的HTTP响应配置以下两个头信息：

• Content-Type: application/pdf：明确告知浏览器返回内容为PDF格式，避免类型识别错误
• Content-Disposition: inline; filename="自定义文件名.pdf"：inline参数明确要求浏览器内联渲染内容（即页内预览）；如果该字段值为attachment，浏览器会直接触发下载，必须替换为inline

如果PDF托管在CDN、云对象存储服务上，直接在对应服务的后台修改资源元信息即可，不需要调整业务服务代码。

2. 前端兜底方案（无服务端修改权限时使用） #

如果无法调整服务端配置，可以通过前端拉取PDF二进制流生成本地临时地址的方式实现预览，绕过原响应头的下载限制，示例代码如下：

const previewPdf = async (pdfOriginUrl) => {
  // 请求PDF二进制数据
  const response = await fetch(pdfOriginUrl);
  const pdfBlob = await response.blob();
  // 手动指定blob类型为PDF，修正类型识别问题
  const pdfData = new Blob([pdfBlob], { type: 'application/pdf' });
  // 生成本地预览地址
  const localPreviewUrl = URL.createObjectURL(pdfData);
  // 新标签页打开本地地址
  window.open(localPreviewUrl, '_blank');
  // 释放临时地址占用的内存
  URL.revokeObjectURL(localPreviewUrl);
};

• 该方案存在跨域限制：如果PDF资源所在服务没有配置当前域名的CORS跨域允许规则，fetch请求会失败，此时只能协调服务端修改配置。

无效方案避坑 #

• 给PDF原地址拼接#toolbar=1、#view=Fit这类PDF阅读器参数无法解决问题，只要响应头标记为attachment，任何参数拼接都会触发下载
• 直接用iframe嵌入PDF原地址同样会受响应头影响，无法绕过下载逻辑

内容的提问来源于stack exchange，提问作者Boursomaster