<iframe> 的打印内容超过一页

Question

在我的反应应用程序中，我有一个iframe，它加载了 HTML 文档，其内容超过了 1 页。按Ctrl+p我想分几页打印，但打印预览只显示一页。

识别iframe的内容不止一个A4页面应该如何处理？

chrome devtool 中的 DOM 看起来像

<div class="article-container">
  <iframe style="">#document
   /* hundreds of <p> tags */
  </iframe>
</div>

react 应用中的结构是这样的

   <div className="article-container">
      <FrameText content={content} status={!this.state.editStatus} />
   </div>

和 FrameText

class FrameText extends React.Component<Props> {
  iframe: HTMLIFrameElement;
  compinentDidMount(){
    window.addEventListener('beforeprint',(e)=>{console.log(e);})
  }
  /* other stuff*/
  render() {
      const { status } = this.props;
      return <iframe ref={(ref) => (this.iframe = ref!)} style={!status ? { display: 'none' } : {}} />;
  }

因此，当按下ctrl+p 时，我得到了事件，并且 iframe 文档在事件中。另外，我在当地也有 iframe 的内容。

我找不到任何地方，当触发此事件时，我可以用它做什么来操纵或以某种方式告诉打印预览内容很长。

另外，css是

@media print {
  .article-container {
    background-color: white;
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    margin: 0;
    padding: 15px;
    font-size: 14px;
    line-height: 18px;
  }
}

Answer 1

您的打印媒体查询不适用于 iframe 内部内容，这是打印时忽略 iframe 大小的原因如果您想将特定的打印样式应用于 iframe，那么您必须通过适当的方法从外部引用（无论是 js 还是 html）我正在编写一个示例以将样式引用到 iframe，可能存在其他实现方式来

let cssLink = document.createElement("link");
cssLink.href = "style.css"; 
cssLink.rel = "stylesheet"; 
cssLink.type = "text/css"; 
frames['iframe1'].document.head.appendChild(cssLink);

Answer 2

我能够通过捕获 CTRL P 事件在 iframe 中打印多个页面，将焦点放在 iframe 上，然后在 iframe 上启动打印。

<iframe id="iframe" name="iframe" src="2.html"></iframe>


<script src="https://code.jquery.com/jquery.min.js"></script>

<script>

    $(document).bind("keyup keydown", function (e) {
        if (e.ctrlKey && e.keyCode === 80) {
            window.frames["iframe"].focus();
            window.frames["iframe"].print();
            return false;
        }
        return true;
    });

</script>