如何在TypeScript中打印带样式的iframe内容

有两种可靠的方法可以实现带样式打印iframe内容，下面分别介绍：

方法一：直接调用iframe的原生打印方法（推荐） #

这是最简单最可靠的方式，它直接利用iframe自身的文档环境进行打印，会完整保留所有样式，还能规避跨域访问的限制（如果iframe加载的是跨域资源）。

步骤1：修改iframe标签，添加name属性 #

<iframe id="iframe" class="iframe-content" [src]="bodyUrl" name="printFrame"></iframe>

步骤2：在TypeScript中实现打印方法 #

print(): void {
  // 通过name属性获取iframe对应的window对象
  const printFrame = window.frames['printFrame'] as Window;
  
  if (printFrame) {
    printFrame.focus(); // 聚焦到iframe，确保打印目标正确
    printFrame.print(); // 触发原生打印功能
  }
}

这种方法的优势：

• 无需手动复制样式和内容，自动保留iframe的所有原有样式
• 即使iframe加载的是跨域资源（比如你示例中的w3schools链接），也能正常触发打印（多数主流浏览器支持）

方法二：自定义打印窗口（适合同源iframe） #

如果需要自定义打印窗口的内容或额外样式，可以手动复制iframe的完整DOM和样式到新窗口。注意：此方法仅适合同源iframe，跨域时浏览器会阻止访问iframe内部文档。

修改TypeScript的print方法： #

print(): void {
  const iframe = document.getElementById('iframe') as HTMLIFrameElement;
  const innerDoc = iframe.contentDocument || iframe.contentWindow.document;
  
  // 提取iframe的头部样式（包括外部样式表、内部style标签）和主体内容
  const iframeHeadContent = innerDoc.head.innerHTML;
  const iframeBodyContent = innerDoc.body.innerHTML;

  // 创建新的打印窗口
  const popupWin = window.open('', '_blank', 'top=0,left=0,width=900,height=700');
  if (!popupWin) {
    alert('无法打开打印窗口，请检查浏览器弹窗设置');
    return;
  }

  // 写入完整HTML内容，包含iframe的样式和主体
  popupWin.document.open();
  popupWin.document.write(`
    <html>
      <head>
        <title>My Print</title>
        <!-- 复制iframe的所有头部样式资源 -->
        ${iframeHeadContent}
        <!-- 添加自定义打印样式 -->
        <style>
          @media print {
            .doNotPrint {
              display: none !important;
            }
          }
        </style>
      </head>
      <body onload="window.print(); window.close()">
        <!-- 复制iframe的主体内容（保留HTML结构和内联样式） -->
        ${iframeBodyContent}
      </body>
    </html>
  `);
  popupWin.document.close();
}

关键说明： #

• 用innerHTML替代了原代码中的innerText，这样能完整保留HTML结构和内联样式
• 复制了iframe头部的所有样式资源，确保打印内容和原iframe样式一致
• 若为跨域iframe，浏览器会抛出DOMException，此时只能使用方法一

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