< iframe>的打印内容超过一页 [英] print content of <iframe> which exceeds one page

问题描述

在我的react应用程序中，我有一个iframe，该HTMLc文档已加载，其内容超过1页.按下Ctrl+p时，我想分几页打印，但是打印预览只显示一页.

in my react application I have an iframe which is loaded with HTML document and content of it exceeds 1 page. on pressing Ctrl+p I want to print it in several pages but the print preview only shows one page.

如何识别iframe的内容不只一页A4页面?

how it should be handled to recognize that the content of iframe is more than one A4 page?

chrome devtool中的DOM看起来像

the DOM in chrome devtool looks like

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

react应用中的结构类似于

the structure in react app is like

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

和FrameText

and the 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的内容设置为本地状态.

so here when the ctrl+p is pressed I get the event and the iframe document is in the event. Also, I have the content of iframe in the local state too.

当触发该事件时，我找不到任何地方可以使用它来进行操作或以某种方式告诉打印预览内容很长.

I could not find anywhere that when this event is triggered what can I do with it to manipulate or somehow tell the print preview that the content is long.

另外，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;
  }
}

推荐答案

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

I was able to print multiple pages in an iframe by capturing the CTRL P event, giving focus to the iframe then initiating printing on the 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>

这篇关于< iframe>的打印内容超过一页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！