Firefox中<object>/<iframe>/<embed>嵌入PDF无法打印问题

针对你遇到的Firefox中PDF打印报错问题，以下是几个可行的解决方向：

1. 排查跨域资源共享(CORS)配置 #

如果你的PDF文件来自跨域服务器，Firefox的打印功能可能因为CORS限制触发NS_ERROR_FAILURE。需要确保PDF所在服务器的响应头包含：

Access-Control-Allow-Origin: 你的域名
Access-Control-Allow-Methods: GET, OPTIONS
Access-Control-Allow-Headers: Content-Type

如果无法修改服务器配置，可以在前端通过同源代理转发PDF请求。

2. 替换为PDF.js库渲染 #

Firefox内置PDF.js，但原生<object>/<iframe>的打印功能存在兼容性bug。直接使用官方PDF.js库自定义查看器，能完全控制打印逻辑：

首先安装依赖：

npm install pdfjs-dist

然后重写组件：

import { useEffect, useRef } from 'react';
import * as pdfjsLib from 'pdfjs-dist';
import 'pdfjs-dist/build/pdf.worker.entry';

export type PDFViewerChildrenProps = {
  dataUrl: string;
};

const PDFViewerChildren = (props: PDFViewerChildrenProps) => {
  const { dataUrl } = props;
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!dataUrl || !containerRef.current) return;

    const renderPDF = async () => {
      const pdf = await pdfjsLib.getDocument(dataUrl).promise;
      const page = await pdf.getPage(1);
      const viewport = page.getViewport({ scale: 1.5 });

      const canvas = document.createElement('canvas');
      const context = canvas.getContext('2d');
      if (!context) return;

      canvas.height = viewport.height;
      canvas.width = viewport.width;
      containerRef.current.appendChild(canvas);

      await page.render({
        canvasContext: context,
        viewport: viewport,
      }).promise;

      // 添加自定义打印按钮
      const printBtn = document.createElement('button');
      printBtn.textContent = '打印PDF';
      printBtn.onclick = () => window.print();
      containerRef.current.appendChild(printBtn);
    };

    renderPDF();
  }, [dataUrl]);

  if (!dataUrl) return null;

  return <div ref={containerRef} aria-label="View PDF" />;
};

export default PDFViewerChildren;

这个方案完全绕过原生PDF查看器的打印bug，通过canvas渲染PDF并自定义打印逻辑。

3. 调整iframe的sandbox权限 #

如果坚持使用iframe，尝试添加sandbox属性并开启打印相关权限：

return (
  <iframe
    src={dataUrl}
    type="application/pdf"
    aria-label="View PDF"
    sandbox="allow-same-origin allow-scripts allow-top-navigation allow-printing"
  />
);

该属性可以放宽Firefox对iframe内资源的权限限制，可能解决打印时的权限错误。

4. 验证PDF文件本身 #

部分PDF文件可能存在损坏、加密或特殊权限设置，导致Firefox打印失败。可以测试其他已知正常的PDF文件，排除文件本身的问题。

内容的提问来源于stack exchange，提问作者Никита Искоростинский