Angular 4调用wkhtmltopdf生成PDF在Firefox无法显示求助

遇到过类似的Firefox与Blob URL兼容问题，结合你的代码和尝试过的方案，给你几个针对性的解决方向：

1. 确认PHP端返回的响应头与内容正确性 #

Firefox对MIME类型的校验比Chrome更严格，首先要确保你的wkhtmltopdf PHP封装工具返回的响应满足两个条件：

• 响应头Content-Type必须是application/pdf
• 返回的PDF内容完整无损坏（可以直接访问PHP接口测试，看是否能正常下载或打开PDF）

2. 调整Angular中Blob的处理与打开方式 #

Firefox有时候不支持直接用open(blobUrl)打开Blob URL，建议改用隐藏<a>标签的方式触发预览/下载，同时规范Blob的类型声明：

public getPdf() {
  const html = this.pdfEl.innerHTML;
  this.rest.post(
    '/pdf',
    { html },
    { 
      headers: new Headers({ 'Content-Type': 'application/json' }),
      responseType: ResponseContentType.Blob 
    }
  ).subscribe((value) => {
    // 明确指定Blob的MIME类型
    const pdfBlob = new Blob([value.blob()], { type: 'application/pdf' });
    const blobUrl = URL.createObjectURL(pdfBlob);

    // 创建隐藏a标签处理打开逻辑
    const link = document.createElement('a');
    link.href = blobUrl;
    link.target = '_blank'; // 在新标签页打开预览
    // 如果需要强制下载，取消下面注释：
    // link.download = 'generated-document.pdf';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);

    // 释放Blob URL，避免内存泄漏
    setTimeout(() => URL.revokeObjectURL(blobUrl), 100);
  });
}

3. 检查Firefox的PDF预览配置 #

有时候不是代码问题，是浏览器设置导致的：

• 打开Firefox的about:preferences页面
• 找到「应用程序」板块，搜索「PDF」
• 确认默认行为是「在Firefox中查看」，而不是「保存文件」或使用外部程序打开

4. 排查Blob内容的完整性 #

在subscribe回调里添加日志，验证返回的Blob是否有效：

console.log('Blob size:', value.blob().size);

如果大小为0或者远小于预期，说明PHP端生成PDF失败，返回了空内容，这时候需要排查wkhtmltopdf的执行日志，看是否有渲染错误。

你之前尝试的两个方案其实方向是对的，但可能卡在Firefox对Blob URL的打开机制上，换用a标签的方式大概率能解决问题。

内容的提问来源于stack exchange，提问作者The Outstanding Question Asker