html - 如何将多个页面的正文内容与固定的页眉和页脚分开-6ren

html - 如何将多个页面的正文内容与固定的页眉和页脚分开

转载作者：技术小花猫更新时间：2023-10-29 12:25:23

我有三个单独的部分作为 header、body 和 footer 来创建 pdf。

页眉部分将始终出现在每个页面的顶部，并且会被修复。

 ______________________
|        header        |
|______________________|

问题出在正文内容上，如果内容很大，它将转到第二页。

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

页 footer 分将始终出现在每个页面的底部，并且它也会修复。

 ______________________
|        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 .与您相关的可能是 top-center 和 bottom-center 区域(与您在查看文档时可能认为的不同，它很可能延伸到整个宽度文档)。

使用这些区域，您可以通过 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 - 如何将多个页面的正文内容与固定的页眉和页脚分开，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38095778/