Chrome浏览器中HTML5 download属性下载外部PDF文件失效问题

这种情况真的很常见！浏览器自带的PDF预览功能经常会“抢戏”，导致download属性对PDF失效，下面给你几个可行的解决办法：

方法1：从服务器端设置响应头（最可靠） #

浏览器是否打开文件很大程度上受服务器返回的Content-Disposition头控制。如果能掌控服务器配置，给PDF文件添加这个响应头就能强制触发下载：

Content-Disposition: attachment; filename="your-desired-filename.pdf"

举几个常见场景的配置方式：

• Apache：在.htaccess里添加

  <FilesMatch "\.pdf$">
    Header set Content-Disposition "attachment"
  </FilesMatch>
  

• Nginx：在server或location块中添加

  location ~* \.pdf$ {
    add_header Content-Disposition "attachment; filename=$request_filename";
  }
  

• 后端代码（以PHP为例）：输出PDF前设置头

  header('Content-Type: application/pdf');
  header('Content-Disposition: attachment; filename="sample.pdf"');
  readfile('path/to/your/pdf.pdf');
  

方法2：前端通过Blob强制触发下载 #

如果没法修改服务器配置，用JS把PDF转成Blob对象再创建下载链接，就能绕开浏览器的预览机制：

async function forceDownloadPDF() {
  try {
    // 发起请求获取PDF资源
    const response = await fetch('http://www.pdf995.com/samples/pdf.pdf');
    // 将响应转为Blob对象
    const pdfBlob = await response.blob();
    // 创建临时URL
    const blobUrl = URL.createObjectURL(pdfBlob);
    
    // 创建下载链接并触发点击
    const downloadLink = document.createElement('a');
    downloadLink.href = blobUrl;
    downloadLink.download = 'sample.pdf'; // 自定义下载后的文件名
    document.body.appendChild(downloadLink);
    downloadLink.click();
    
    // 清理临时资源
    document.body.removeChild(downloadLink);
    URL.revokeObjectURL(blobUrl);
  } catch (error) {
    console.error('下载失败:', error);
  }
}

你可以把这个函数绑定到按钮点击事件，或者直接调用，就能强制浏览器下载PDF了。

方法3：检查浏览器端设置（兜底提示） #

如果上面的方法都没用，可能是用户的浏览器默认设置了“总是打开PDF”。比如Chrome里，可以在「设置→隐私和安全性→站点设置→PDF文档」中，勾选“下载PDF文件而不是在Chrome中自动打开它们”。不过这是用户端的操作，只能作为辅助提示告知用户。

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