Question

在我的react应用程序中，我有一个 iframe ，其中已加载HTML文档，其内容超过了一页。在按 Ctrl + p 时，我想将其打印成几页，但打印预览仅显示一页。

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

chrome devtool中的DOM看起来像

  
  ＃document
   / *数百个<p>标记* /

react应用中的结构类似于

和FrameText

  Class FrameText扩展了React.Component  {
  iframe：HTMLIFrameElement；
  compinentDidMount（）{
    window.addEventListener（'beforeprint'，（e）=> {console.log（e）;}）
  }
  /* 其他的东西*/
  render（）{
      const {status} = this.props;
      返回（this.iframe = ref！）} style = {！status？ {display：'none'}：{}} />;
  }
</code> </pre>

<p>所以在这里，当按下<code> ctrl + p </code>时，我得到了事件，并且iframe文档也在事件中。另外，我也具有本地状态下iframe的内容。</p>

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

<p>另外，css是</p>

<pre> <code> @media打印{
  .article-container {
    背景颜色：白色；
    高度：100％;
    宽度：100％;
    位置：固定；
    最高：0;
    左：0；
    边距：0;
    填充：15px;
    font-size：14px;
    行高：18px;
  }
}
</code> </pre>
    </div>

    <div class="answer-list">
      <h4>2 个答案:</h4>
      
      <div class="hr-line-dashed"></div>
      <p>答案 0 :(得分：0)</p>
      <div class="answer markdown-body">
        <p>您的印刷媒体查询不适用于iframe内部内容，这是打印时忽略iframe大小的原因如果您要将特定的打印样式应用于iframe，则必须通过适当的方法（无论是js还是html）从外部进行引用我正在编写一个示例，以引用iframe的样式，对于</p>可能还有其他实现

<pre><code>let cssLink = document.createElement(&#34;link&#34;);
cssLink.href = &#34;style.css&#34;; 
cssLink.rel = &#34;stylesheet&#34;; 
cssLink.type = &#34;text/css&#34;; 
frames[&#39;iframe1&#39;].document.head.appendChild(cssLink);
</code></pre>
      </div>
      
      <div class="hr-line-dashed"></div>
      <p>答案 1 :(得分：0)</p>
      <div class="answer markdown-body">
        <p>我能够通过捕获CTRL P事件在iframe中打印多个页面，将焦点集中到iframe然后在iframe上开始打印。</p>

<pre><code>&lt;iframe id=&#34;iframe&#34; name=&#34;iframe&#34; src=&#34;2.html&#34;&gt;&lt;/iframe&gt;


&lt;script src=&#34;https://code.jquery.com/jquery.min.js&#34;&gt;&lt;/script&gt;

&lt;script&gt;

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

&lt;/script&gt;
</code></pre>
      </div>
      
    </div>

  </div>

  <div class="right">
    <div style="height:400px">
      <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
      <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6263610230477973" data-ad-slot="2820756182"
        data-ad-format="auto" data-full-width-responsive="true"></ins>
      <script>
        (adsbygoogle = window.adsbygoogle || []).push({});
      </script>
    </div>


    <div style="height:20px"></div>

    <div class="releated-question-wrapper">
      <div class="header">
        相关问题
      </div>
      <div class="hr-line-dashed"></div>
      <ul>
        
        <li>
          <a href="/q/11347731">打印iframe内容</a>
        </li>
        
        <li>
          <a href="/q/14822864">打印创建的iframe内容。空页面</a>
        </li>
        
        <li>
          <a href="/q/16662585">onclick在iframe内打印内容</a>
        </li>
        
        <li>
          <a href="/q/32314024">仅在页面加载时打印Iframe内容</a>
        </li>
        
        <li>
          <a href="/q/34003664">PHP在一个页面上打印带有iframe的网页和一些带有pdf的其他内容</a>
        </li>
        
        <li>
          <a href="/q/36645879">打印iframe内容</a>
        </li>
        
        <li>
          <a href="/q/37905501">尝试打印iframe内容，但打印整个页面</a>
        </li>
        
        <li>
          <a href="/q/45805459">如何打印出iframe的内容</a>
        </li>
        
        <li>
          <a href="/q/49390891">iframe内容超过100％</a>
        </li>
        
        <li>
          <a href="/q/54912648">&lt;iframe&gt;的打印内容超过一页</a>
        </li>
        
      </ul>
    </div>



    

    

    <div class="releated-question-wrapper">
      <div class="header">
        最新问题
      </div>
      <div class="hr-line-dashed"></div>
      <ul>
        
        <li>
          <a href="/q/68614764">我写了这段代码，但我无法理解我的错误</a>
        </li>
        
        <li>
          <a href="/q/68614678">我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？</a>
        </li>
        
        <li>
          <a href="/q/68614175">是否有可能使 loadstring 不可能等于打印？卢阿</a>
        </li>
        
        <li>
          <a href="/q/68614313">java中的random.expovariate()</a>
        </li>
        
        <li>
          <a href="/q/68614125">Appscript 通过会议在 Google 日历中发送电子邮件和创建活动</a>
        </li>
        
        <li>
          <a href="/q/68615109">为什么我的 Onclick 箭头功能在 React 中不起作用？</a>
        </li>
        
        <li>
          <a href="/q/68615123">在此代码中是否有使用“this”的替代方法？</a>
        </li>
        
        <li>
          <a href="/q/68614097">在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化</a>
        </li>
        
        <li>
          <a href="/q/68614427">每千个数字得到</a>
        </li>
        
        <li>
          <a href="/q/68615239">更新了城市边界 KML 文件的来源？</a>
        </li>
        
      </ul>
    </div>
    <div class="">
    </div>
  </div>
</div>


  <div>
    <script>
      var host = window.location.host;
      if (host == "www.thinbug.com") {
        (function () {
          var bp = document.createElement('script');
          var curProtocol = window.location.protocol.split(':')[0];
          if (curProtocol === 'https') {
            bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
          }
          else {
            bp.src = 'http://push.zhanzhang.baidu.com/push.js';
          }
          var s = document.getElementsByTagName("script")[0];
          s.parentNode.insertBefore(bp, s);
        })();
      }
    </script>

    

</body>

</html>