时间戳

首页 > 解决方案 > 使用 iframe html 加载的页面的浏览器打印未正确分页（文本行在分页符处拆分）

html - 使用 iframe html 加载的页面的浏览器打印未正确分页（文本行在分页符处拆分）

问题描述

我正在使用 html iframe 标签来显示一个多页的 html 文档。尝试使用浏览器打印文档时，分页被搞砸了，分页符在一个页面上显示一半的文本行，然后在下一页显示另一半。

当我直接通过页面的 url 显示多页文档时，页面显示相同且正确分页。

不知道我做错了什么。

下面是使用 iframe 显示文档的代码：

<style>
.h_iframe iframe {
  position:relative;
  width:100%;
  display: block;
}

<script>

function iframeLoaded() {
    var iFrameID = document.getElementById('iframe');
    if(iFrameID) {
          iFrameID.height = "";
          var height = iFrameID.contentWindow.document.body.scrollHeight;
          iFrameID.height = height + "px";
    }   
}
</script>

<body>
<div class="h_iframe">
    <iframe src='anyfilename.htm' name="iframe" id="iframe" onload="iframeLoaded()" scrolling='no' allowfullscreen frameborder="0"></iframe>
</div>

并在样式部分的 anyfilename.htm 中包含以下内容：（但是，正如我上面提到的，直接打印此文件会正确地对文档进行分页。

@media print {

    .site-container, .site-inner , body {position:relative;}

  p {
      page-break-before: auto;
      page-break-after: auto; 
      page-break-inside: avoid;
      display: block;
      position: relative; 
  }

}

任何帮助是极大的赞赏

标签： htmlcssiframeprinting

解决方案

推荐阅读