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

Dro*_*one 14 html css dompdf page-break-inside laravel

我有三个单独的部分header,bodyfooter创建PDF格式.

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

 ______________________
|        header        |
|______________________|
Run Code Online (Sandbox Code Playgroud)

问题在于身体内容,如果内容很大,则会转到第二页.

 ______________________
|                      |
|                      |
|        body          |
|                      |
|                      |
|______________________|
Run Code Online (Sandbox Code Playgroud)

页脚部分将始终位于每页的底部,它也将修复.

 ______________________
|        footer        |
|______________________|
Run Code Online (Sandbox Code Playgroud)

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

 ______________________
|        header        |
|______________________|
|                      |
|                      |
|        Body Part1    |
|                      |
|                      |
|______________________|
|        footer        |
|______________________|
Run Code Online (Sandbox Code Playgroud)

 ______________________
|        header        |
|______________________|
|                      |
|                      |
|        Body part2    |
|                      |
|                      |
|______________________|
|        footer        |
|______________________|
Run Code Online (Sandbox Code Playgroud)

我尝试使用表格格式,它适用于标题和内容,但不适用于页脚.页脚仅在第二页的底部而不是在第一页中.

我正在使用laravel dompdf

任何帮助将不胜感激.

The*_*Man 11

HTML假设一个不间断的元素序列,而打印页面需要将这些内容分成几个部分.最好的解释器可以在没有你告诉它的情况下做到这一点,就是将元素分隔到页面上,这样大多数都可以放在一个页面上.

这篇关于SmashingMagazine的详尽文章将告诉你如何使用CSS设计HTML进行打印.

最重要的是,对于你的问题,它将在整洁的表格上详细说明@page区域.与您相关的可能是和区域(与您可能认为查看文档不同,它可能很好地扩展到文档的整个宽度).top-centerbottom-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;
  }
}
Run Code Online (Sandbox Code Playgroud)

虽然你使用laravel时没有问题,但是我没有浏览器会打印这些区域,因此对于常规打印样式表来说它不会那么实用.


虽然您可以使用CSS做很多事情,但您可能有太复杂的内容无法以上述方式创建它.在这种情况下,您可以使用具有position:fixed属性的元素,该元素将在每个页面的顶部/底部呈现,具体取决于您的样式 - 例如:

@media print {
  header {
    position: fixed;
    top: 0;
  }
  footer {
    position: fixed;
    bottom: 0;
  }
}
Run Code Online (Sandbox Code Playgroud)

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>
Run Code Online (Sandbox Code Playgroud)


Dro*_*one 3

我再次检查了这个有用的答案:/sf/answers/123457841/,并进行了一些更改和外部 div 标签,它对我有用。

我不知道 laravel dompdf 如何将此 html 转换为 pdf,但它对我有用。

这是我的 Laravel 代码

Route::get('/', function () {
    $output = '<style>';
    $output .= '
        .divFooter {position: fixed;bottom: 20;text-align:center;}
                ';
    $output .= '</style>';
    $output .= '<div class="divFooter" style="color:red;"><h1>This is footer</h1></div>';
    $output .= '<table width="100%"><thead><tr><th><div style="color:red;"><h1>This is header</h1></div><th></tr></thead>';
    $output .= '<tbody><tr><td>';
    $output .= 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td></tr>
      .........................
      .........................
      .........................
    ';
    $output .= '</tbody></table>';
    $pdf = App::make('dompdf.wrapper');
    $pdf->loadHTML($output);
    return $pdf->stream();
});
Run Code Online (Sandbox Code Playgroud)

生成这样的pdf:http://content.screencast.com/users/Niklesh2/folders/Jing/media/13bb7a6f-f280-46db-94df-1af6270b4b02/2016-08-10_1713.png

很抱歉我无法告诉您它是如何工作的。但可能对在 laravel dompdf 中工作的其他人有帮助。

干杯!