Angular移动端Chrome打印异常：iframe内容未显示，打印父页面

以下是针对你遇到的移动端Chrome打印iframe内容显示父页面问题的具体排查和修复方向：

1. 修复iframe文档写入后的状态 #

你当前的代码中，printWin.document.write(data)后没有调用document.close()，这会导致浏览器认为文档仍在加载状态，无法触发后续加载事件，也可能让移动端Chrome无法正确识别iframe内容。修改代码如下：

return this._api.printEntity(entity).pipe(
  tap(data => {
    const iframe: HTMLIFrameElement = document.createElement('iframe');
    document.body.appendChild(iframe);

    const printWin: Window = iframe.contentWindow!;
    printWin.document.write(data);
    printWin.document.close(); // 必须添加这一行，结束文档写入

    printWin.document.addEventListener('DOMContentLoaded', () => {
      printWin.focus();
      printWin.print();
      printWin.close();
      document.body.removeChild(iframe);
    });
  })
);

2. 强制提升iframe的打印上下文优先级 #

移动端Chrome对window.focus()的处理可能和桌面端不同，试试通过iframe的name属性直接调用打印，同时确保iframe在视口内可见（哪怕极小）：

return this._api.printEntity(entity).pipe(
  tap(data => {
    const iframe: HTMLIFrameElement = document.createElement('iframe');
    // 给iframe设置唯一name和可见样式
    iframe.name = `printFrame_${Date.now()}`;
    iframe.style.position = 'absolute';
    iframe.style.top = '0';
    iframe.style.left = '0';
    iframe.style.width = '1px';
    iframe.style.height = '1px';
    iframe.style.border = 'none';
    document.body.appendChild(iframe);

    const printWin: Window = iframe.contentWindow!;
    printWin.document.write(data);
    printWin.document.close();

    printWin.document.addEventListener('DOMContentLoaded', () => {
      // 通过frames[name]调用print，确保上下文正确
      window.frames[iframe.name].focus();
      window.frames[iframe.name].print();
      setTimeout(() => {
        document.body.removeChild(iframe);
      }, 500);
    });
  })
);

3. 替换iframe为新窗口打印 #

移动端Chrome对iframe的打印支持存在兼容性问题，改用新窗口可能解决问题。注意要确保窗口打开操作在用户交互上下文内（避免被浏览器拦截）：

return this._api.printEntity(entity).pipe(
  tap(data => {
    // 打开新窗口
    const printWin = window.open('', '_blank');
    if (!printWin) {
      alert('请允许弹窗权限以完成打印');
      return;
    }
    printWin.document.write(data);
    printWin.document.close();

    printWin.addEventListener('load', () => {
      printWin.focus();
      printWin.print();
      // 延迟关闭，避免打印弹窗被提前关闭
      setTimeout(() => printWin.close(), 1000);
    });
  })
);

4. 验证iframe内容的加载状态 #

固定1000ms的setTimeout不可靠，改为检查文档的readyState确保内容完全加载：

return this._api.printEntity(entity).pipe(
  tap(data => {
    const iframe: HTMLIFrameElement = document.createElement('iframe');
    document.body.appendChild(iframe);

    const printWin: Window = iframe.contentWindow!;
    printWin.document.write(data);
    printWin.document.close();

    const checkAndPrint = () => {
      if (printWin.document.readyState === 'complete') {
        printWin.focus();
        printWin.print();
        printWin.close();
        document.body.removeChild(iframe);
      } else {
        setTimeout(checkAndPrint, 100);
      }
    };
    checkAndPrint();
  })
);

5. 检查服务端返回的HTML打印样式 #

在远程调试中模拟打印媒体查询（Chrome调试器的More Tools > Rendering > Emulate CSS media type: print），查看iframe内的内容是否正常渲染。确保服务端返回的HTML中@media print样式没有隐藏内容，且适配移动端打印尺寸。

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