如何让PDF始终在浏览器中打开而非自动下载？

你遇到的问题核心原因是服务器返回的HTTP响应头差异，和前端window.open的调用方式无关。关键看这两个响应头：

问题根源 #

• 当服务器返回 Content-Type: application/pdf，且 Content-Disposition 为 inline（或未设置该字段，浏览器默认按inline处理）时，浏览器会尝试在页面内嵌打开PDF。
• 当服务器返回 Content-Disposition: attachment 时，浏览器会直接触发下载，忽略Content-Type的设置。
• 少数情况可能和PDF文件本身的编码、扩展名，或浏览器本地设置/扩展有关，但90%以上的差异来自响应头。

解决方案 #

1. 修改服务器响应头（最可靠的方案） #

直接调整服务器配置，确保所有PDF文件返回以下响应头：

Content-Type: application/pdf
Content-Disposition: inline; filename="你的文件名.pdf"

不同服务器的配置方式不同：

• Nginx：在location或server块中添加 add_header Content-Disposition 'inline';
• Apache：用 Header set Content-Disposition "inline"
• 后端代码（比如Node.js/Java/Python）：在返回文件时手动设置这两个头

2. 前端替代方案（无法修改服务器时用） #

如果没法改动服务器，可以通过前端加载PDF内容并自主渲染，绕过响应头的限制，以下是简单的Blob+iframe实现方式：

示例代码

// 加载PDF并在新窗口打开
fetch('你的PDF文件URL')
  .then(res => res.blob())
  .then(blob => {
    // 创建Blob URL
    const pdfBlobUrl = URL.createObjectURL(blob);
    // 打开新窗口展示PDF
    const newWindow = window.open('', '_blank');
    if (newWindow) {
      // 在新窗口中插入iframe
      newWindow.document.write(`
        <iframe src="${pdfBlobUrl}" style="width:100%;height:100vh;border:none;"></iframe>
      `);
      // 释放Blob URL（关闭窗口时自动释放，可选）
      newWindow.addEventListener('beforeunload', () => {
        URL.revokeObjectURL(pdfBlobUrl);
      });
    }
  })
  .catch(err => console.error('PDF加载失败:', err));

注意：这种方式要求服务器允许跨域请求（如果PDF和当前页面不在同一域名），否则会触发CORS错误。

3. 其他注意事项 #

• 浏览器本地设置：如果用户在浏览器中手动设置了「所有PDF文件都自动下载」，即使响应头是inline也会强制下载，这种情况前端无法干预，只能提示用户检查浏览器设置。
• 第三方扩展：部分PDF阅读扩展可能会强制修改PDF的打开行为，这也不属于前端可控范围。

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