如何允许/强制网页中嵌入的<iframe>元素在打印时分页？

方法1：通过CSS打印样式开启iframe内部分页 #

默认浏览器会把iframe视为不可分割的块级元素，导致打印时直接跳转到下一页。你可以通过打印媒体查询的CSS规则，强制允许iframe内容在页面内分页：

@media print {
  iframe {
    page-break-inside: auto !important; /* 允许iframe内部内容分页截断 */
    page-break-before: avoid !important; /* 禁止在iframe前自动分页，强制从当前页开始 */
    display: block;
    width: 100%;
    height: auto; /* 取消固定高度，让内容自然展开 */
    overflow: visible; /* 打印时不隐藏溢出内容 */
  }
}

如果iframe和主页面同域，还可以给iframe内部的页面添加分页规则，让内部内容更友好地截断：

/* 需在iframe的内部页面中添加 */
@media print {
  body {
    page-break-inside: auto;
  }
  /* 可选：给内部的长元素单独设置分页允许，比如长表格 */
  table {
    page-break-inside: auto;
  }
}

方法2：同域场景下替换iframe为原生DOM内容 #

如果iframe和主页面同域，直接把iframe的内容提取到主文档中，让打印引擎像处理普通内容一样分页：

// 打印前替换同域iframe为内容节点
window.addEventListener('beforeprint', () => {
  document.querySelectorAll('iframe').forEach(iframe => {
    if (iframe.contentWindow.location.origin === window.location.origin) {
      const contentContainer = document.createElement('div');
      contentContainer.innerHTML = iframe.contentDocument.body.innerHTML;
      contentContainer.className = iframe.className; // 保留原样式
      iframe.parentNode.replaceChild(contentContainer, iframe);
    }
  });
});

这种方式彻底消除了iframe的“不可分割”特性，完全由主文档的打印规则控制分页。

跨域iframe的处理方案 #

如果iframe是跨域的，无法直接修改其内部样式或提取内容，你有两个选择：

• 联系iframe提供方，让他们在页面中添加打印专用的CSS规则（即上面提到的page-break-inside: auto），允许内容分页
• 通过后端服务抓取iframe的内容，将其合并到主页面的HTML中后再生成PDF（需要后端支持内容抓取和渲染）

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