Chrome浏览器中iframe嵌入PDF后点击下载按钮无响应问题求助

该问题是Chrome浏览器的专属特性导致的：

• 当你用target="_blank"新标签页打开POST返回的PDF时，Chrome会将完整的PDF响应缓存在当前标签页的上下文内，点击下载按钮时直接读取本地缓存的内容，不需要重新发起请求，因此工作正常。
• 当PDF嵌入在iframe中时，Chrome内置PDF查看器的下载按钮被触发后，会默认向原接口地址发起GET请求拉取下载资源，而你的接口仅支持POST请求，GET请求返回的是错误的HTML内容而非PDF文件，因此下载失败。
• Firefox没有该逻辑，点击下载时会直接读取iframe中已加载的PDF资源，因此运行正常。

方案1：后端新增临时GET地址（最稳妥，全浏览器兼容） #

后端调整接口逻辑：

1. 接收前端POST生成PDF的请求后，将生成的PDF文件临时存储3~5分钟，生成一个唯一的临时可访问GET地址
2. 接口返回该临时地址，前端直接将iframe的src属性设置为该GET地址
   该方案下PDF资源是标准GET请求返回的，预览、自带下载按钮功能均可正常工作。

方案2：前端改用Blob方式加载PDF #

不需要修改后端逻辑，前端替换原来的表单提交逻辑，用fetch请求获取PDF的Blob数据后加载到iframe中：

async function loadPDFToIframe() {
  const res = await fetch(endpoint + "api/v1/downloads/get-pdf", {
    method: "POST",
    headers: {
      "Content-Type": "application/x-www-form-urlencoded",
    },
    body: `wsInputs=${encodeURIComponent(JSON.stringify(wsPDFInputs))}`,
  });
  const pdfBlob = await res.blob();
  const blobUrl = URL.createObjectURL(pdfBlob);
  const iframe = document.querySelector<HTMLIFrameElement>('iframe[name="my_iframe"]')!;
  iframe.src = blobUrl;
  // 页面卸载时释放blob地址避免内存泄漏
  window.addEventListener('beforeunload', () => URL.revokeObjectURL(blobUrl));
}

该方案下iframe的src是本地生成的Blob地址，Chrome PDF查看器可以直接读取到完整资源，下载功能可正常使用。

方案3：新增自定义下载按钮绕开内置下载逻辑 #

如果不想修改现有加载逻辑，可在iframe外添加自定义下载按钮，主动发起POST请求获取PDF后触发下载：

async function customDownloadPDF() {
  const res = await fetch(endpoint + "api/v1/downloads/get-pdf", {
    method: "POST",
    headers: {
      "Content-Type": "application/x-www-form-urlencoded",
    },
    body: `wsInputs=${encodeURIComponent(JSON.stringify(wsPDFInputs))}`,
  });
  const pdfBlob = await res.blob();
  const blobUrl = URL.createObjectURL(pdfBlob);
  const aTag = document.createElement('a');
  aTag.href = blobUrl;
  aTag.download = "导出文件.pdf";
  aTag.click();
  URL.revokeObjectURL(blobUrl);
}

该方案完全不依赖Chrome内置PDF查看器的下载功能，兼容性最强。

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