html – 如何使用固定页眉和页脚分隔多个页面的正文内容

我有三个单独的部分作为标题,正文和页脚来创建pdf.

标题部分将始终位于每个页面的顶部,它将被修复.

______________________
|        header        |
|______________________|

问题是身体内容,如果内容很大,会去第二页.

______________________
|                      |
|                      |
|        body          |
|                      |
|                      |
|______________________|

页脚部分将始终在每个页面的底部,它也将修复.

______________________
|        footer        |
|______________________|

所以如果内容很大,如果创建了两个页面,那么我应该得到两个页面：

______________________
|        header        |
|______________________|
|                      |
|                      |
|        Body Part1    |
|                      |
|                      |
|______________________|
|        footer        |
|______________________|

和

______________________
|        header        |
|______________________|
|                      |
|                      |
|        Body part2    |
|                      |
|                      |
|______________________|
|        footer        |
|______________________|

我试着用table format,它正在为标题和内容,但不是为页脚工作.页脚仅在第二页的底部而不是第一页.

我正在使用laravel dompdf

任何帮助将赞赏.

解决方法

HTML假定一个不间断的不间断的元素序列,而打印的页面需要将该内容分割成多个部分.如果没有告诉它,则最好的解释器是将元素分离到页面上,以便它们大部分适合单个页面.

This very exhaustive article on SmashingMagazine会告诉你很多关于如何使用CSS设计HTML进行打印.

最重要的是对于你的问题,它会详细说明@page区域on a tidy sheet.相关的你可能会是顶级中心和底层中心的地区(不像你可能认为看到文件,可能会很好地延伸到整个宽度文件).

使用这些区域,您可以通过CSS定义页眉和页脚,如果您正在设计一本书,甚至可以根据它们的折叠边来对其进行风格化.这些工作通过直接在CSS中添加内容,因此您的HTML不需要任何标记.

/* print a centered title on every page */
@top-center {
  content: "Title";
  color: #333;
  text-align: center;
}

/* print the title on the left side for left-hand pages,and vice versa */
@page:left {
  @top-left {
    content: "Title";
    color: #333;
  }
}
@page:right {
  @top-right {
    content: "Title";
    color: #333;
  }
}

虽然你使用laravel是一个非问题,但是我没有浏览器会打印这些区域,所以对于常规的打印样式表来说,这不是一个实用的方法.

虽然您可以使用CSS做很多工作,但您可能会发现这些内容过于复杂,无法以上述方式创建.在这种情况下,您可以使用具有position：fixed属性的元素,它将渲染在每个页面的顶部/底部,具体取决于您的风格,例如：

@media print {
  header {
    position: fixed;
    top: 0;
  }
  footer {
    position: fixed;
    bottom: 0;
  }
}

HTML：

<body>
  <header>
      above the content on screen,and on the top of every printed page
  </header>
  <main>
      content that is flowing and behaving as you would expect it
  </main>
  <footer>
      below the content on screen,and on the bottom of every printed page
  </footer>
</body>

html – 如何使用固定页眉和页脚分隔多个页面的正文内容

解决方法

相关文章