打印内容 超过一页

Question

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

如何识别iframe的内容超过一页A4页？

chrome devtool中的DOM看起来像

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

react app中的结构就像

   <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>