Angular 17中iframe加载PDF无法触发下载的问题排查与解决

问题原因 #

1. 浏览器默认行为限制：如果PDF链接的服务器响应头未设置Content-Disposition: attachment; filename="xxx.pdf"，浏览器会直接在iframe内渲染PDF，不会触发下载弹窗。
2. 缺少主动触发逻辑：即使响应头配置正确，部分浏览器也不会自动触发下载，需要额外处理下载触发逻辑。
3. 未清理DOM元素：原代码仅添加iframe，未在操作完成后移除，会造成DOM冗余。

修复方案 #

方案1：配合服务器修改响应头（推荐）

如果能控制PDF接口的服务器配置，添加Content-Disposition响应头，让浏览器识别为附件下载。调整后的代码如下：

downloadInvoice(url: string): void {
  if (isPlatformBrowser(this.platformId)) {
    const iframe = document.createElement('iframe');
    iframe.style.display = 'none';
    iframe.src = url;

    // 加载完成后延迟移除iframe，确保下载流程完成
    iframe.onload = () => {
      setTimeout(() => {
        document.body.removeChild(iframe);
      }, 1000);
    };

    // 处理加载错误，及时清理iframe
    iframe.onerror = () => {
      document.body.removeChild(iframe);
      console.error('PDF加载失败，请检查链接');
    };

    document.body.appendChild(iframe);
  }
}

方案2：无法修改服务器时的替代方案

如果无法调整服务器响应头，改用fetch获取PDF Blob，通过隐藏的<a>标签在当前页面触发下载（不打开新页面）：

downloadInvoice(url: string): void {
  if (isPlatformBrowser(this.platformId)) {
    fetch(url)
      .then(res => {
        if (!res.ok) throw new Error('请求失败');
        return res.blob();
      })
      .then(blob => {
        const blobUrl = URL.createObjectURL(blob);
        const downloadLink = document.createElement('a');
        
        downloadLink.href = blobUrl;
        downloadLink.download = 'invoice.pdf'; // 自定义下载文件名
        downloadLink.style.display = 'none';
        
        document.body.appendChild(downloadLink);
        downloadLink.click();
        
        // 清理DOM和Blob资源
        document.body.removeChild(downloadLink);
        URL.revokeObjectURL(blobUrl);
      })
      .catch(err => console.error('下载失败:', err));
  }
}

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