Question

我正在尝试弄清楚如何在使用网络浏览器打印出的每个页面上添加页眉和页脚。我有一个简单的html页面，有一个页眉和一个页脚。我也有一个需要溢出的身体。我无法弄清楚如何在每页打印出来时不要切断页眉和页脚。

这是我对每个页面所需的输出..请注意页眉和页脚，中间的内容未被剪切掉

这是我在第一个输出页面之后得到的内容（这实际上是打印到pdf时文档的第二页）。注意正文内容溢出到下一页并且标题被覆盖。

我想知道是否甚至可以根据网页浏览器打印的页面拆分正文。

以下是代码：

＆＃13;

div.body {
    font-size: 18px;
}
@media print {
    /* print styles go here */
    div.body {
      margin-top: 20px;
      margin-bottom: 100px;
      page-break-inside: avoid;
      padding-top: 1cm;
      padding-bottom: 1cm;
    }
    @page {
      size: auto;   /* auto is the initial value */

      /* this affects the margin in the printer settings */
      margin: 25mm 25mm 25mm 25mm;
    }
    div.divFooter {
      bottom: 0;
      background-color: #ffffff;
      height: 50px;
      margin-top: -20px;
      left: 0;
      font-size: small;
      width:100%;
      text-align: center;
      position:fixed;
      left:0
    }
    div.divHeader {
      position: fixed;
      height:100px;
      top:0;
      margin-bottom: -20px;
      width:100%;
      position:fixed;
      left:0
    }

}

＆＃13;

<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>

<div class="divHeader"><p>This is my Header</p></div>

  <div class="body">
    Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
    <br>Hello this is a test!
  </div>


<div class="divFooter"><p>This is my footer</p></div>

</html>

＆＃13;

HTML打印页面到PDF固定页眉和页脚切断溢出div

0 个答案: