可正常下载图片的JavaScript代码无法下载PDF文件如何解决？

问题排查步骤 #

• 首先检查控制台是否有CORS跨域报错：跨域是最常见的诱因，图片资源通常浏览器允许img标签无CORS加载，但fetch请求受同源策略限制，若PDF所在的目标服务器未配置允许你当前域名的Access-Control-Allow-Origin响应头，fetch请求会直接失败，图片能下载是因为图片加载逻辑和fetch的跨域校验机制不同。
• 校验fetch请求的响应状态：现有代码未做请求成功判断，若请求返回404、403、500等错误状态，直接调用.blob()会解析失败，无法生成有效文件流。
• 检查浏览器的下载权限拦截：部分浏览器会拦截动态生成的a标签触发的下载行为，可在浏览器设置里检查对应域名的下载权限是否正常。
• 检查Blob对象的MIME类型是否正确：如果返回的PDF响应头Content-Type设置错误，会导致Blob解析异常，无法生成可正常打开的PDF文件。

解决方法 #

修正后的完整可运行代码如下：

<a href="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf" data-remote>Remote PDF</a>

<script defer type="text/javascript">
  const a = document.querySelector('a[data-remote]')
  a.addEventListener('click', async (e) => {
    e.preventDefault()
    try {
      const file = await fetch(e.target.href, {
        mode: 'cors',
        credentials: 'same-origin'
      });
      // 校验响应是否成功
      if (!file.ok) {
        throw new Error(`请求失败，状态码：${file.status}`);
      }
      // 明确指定PDF的MIME类型，覆盖错误的响应头
      const originBlob = await file.blob();
      const pdfBlob = new Blob([originBlob], { type: 'application/pdf' });
      const blobUrl = URL.createObjectURL(pdfBlob);
      const downloadLink = document.createElement("a");
      downloadLink.href = blobUrl;
      downloadLink.download = 'file.pdf';
      // 兼容Firefox等浏览器，需要把a标签插入DOM再触发点击
      document.body.appendChild(downloadLink);
      downloadLink.click();
      // 清理资源避免内存泄漏
      document.body.removeChild(downloadLink);
      URL.revokeObjectURL(blobUrl);
    } catch (err) {
      console.error('PDF下载失败：', err);
      // 跨域场景降级方案：直接打开新标签页供用户手动下载
      window.open(e.target.href, '_blank');
    }
  })
</script>

核心优化说明 #

• 新增了请求异常捕获和状态校验，可明确定位CORS、资源不存在等错误
• 手动指定Blob的MIME类型为application/pdf，避免响应头错误导致的文件解析异常
• 新增动态a标签的DOM插入/移除逻辑，兼容Firefox等浏览器对动态生成元素的点击限制
• 新增BlobURL释放逻辑，避免内存泄漏
• 新增跨域场景降级方案，若目标服务器CORS配置无法调整，可直接让用户在新标签页手动下载PDF。如果是你可控的服务器，也可以直接给PDF资源的响应头添加Access-Control-Allow-Origin配置，允许你的站点域名跨域访问，或者配置反向代理把PDF请求代理到自有域名下绕开跨域限制。

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