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

Question

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

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

 ______________________
|        header        |
|______________________|

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

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

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

 ______________________
|        footer        |
|______________________|

因此，如果内容很大并且创建了两个页面，那么我应该得到两个页面：

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

和

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

我试过 table format，它适用于页眉和内容，但不适用于页脚。页脚仅出现在第二页的底部，而不出现在第一页。

我正在使用 laravel dompdf

如有任何帮助，我们将不胜感激。

Answer 1

HTML 假定元素的连续不间断序列，而打印页面需要将该内容分成多个部分。最好的解释器可以在没有你告诉它的情况下将元素分隔到页面上，以便它们中的大多数适合一个页面。

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

对于您的问题最重要的是，它将详细说明 @page regions 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 属性的元素，它将呈现在每个页面的 top/bottom 上，具体取决于您如何设置它的样式 - 例如：

@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>

Answer 2

在完整视图中尝试以下代码。

header{
 height: 80px;
 border:1px solid red;
 position: fixed;
 width: 100%;
 top:0;
 background-color: red;
}
.content{
 border: 2px solid #000;
 margin-top: 80px;
 height: 100%;
 width: 100%;
}
footer{
 height: 80px;
 border:1px solid red;
 position: fixed;
 bottom: 0;
 width: 100%;
 background-color: red;
}

<body>

<header>
 <h1>Header</h1>
</header>

<div class="content">
 <h1>Content</h1>
 <p>one Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>

 <p>2 Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>

 <p>3 Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
 <p>4 Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
 <p>5 Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
 <p>6 Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
 <p>7 Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
</div>

<footer>
 <h1>Footer</h1>
</footer>


</body>

Answer 3

我再次检查了这个有用的答案：并进行了一些更改和外部 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();
});

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

很抱歉，我无法告诉您它是如何工作的。但可能对在 laravel dompdf.

中工作的其他人有所帮助

干杯!!

Answer 4

基本上，这种类型的应用程序称为单页应用程序

> Please use power of AngularJs in this type of requirement, it has strength of routing.

<html>

   <head>
      <title>Angular JS Views</title>
      <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
      <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"></script>
   </head>

   <body>
      <h2>AngularJS Sample Application</h2>
      <div ng-app = "mainApp">
         <p><a href = "#addStudent">Add Student</a></p>
         <p><a href = "#viewStudents">View Students</a></p>
         <div ng-view></div>

         <script type = "text/ng-template" id = "addStudent.htm">
            <h2> Add Student </h2>
            {{message}}
         </script>

         <script type = "text/ng-template" id = "viewStudents.htm">
            <h2> View Students </h2>
            {{message}}
         </script>
      </div>

      <script>
         var mainApp = angular.module("mainApp", ['ngRoute']);
         mainApp.config(['$routeProvider', function($routeProvider) {
            $routeProvider.

            when('/addStudent', {
               templateUrl: 'addStudent.htm',
               controller: 'AddStudentController'
            }).

            when('/viewStudents', {
               templateUrl: 'viewStudents.htm',
               controller: 'ViewStudentsController'
            }).

            otherwise({
               redirectTo: '/addStudent'
            });
         }]);

         mainApp.controller('AddStudentController', function($scope) {
            $scope.message = "This page will be used to display add student form";
         });

         mainApp.controller('ViewStudentsController', function($scope) {
            $scope.message = "This page will be used to display all the students";
         });

      </script>

   </body>
</html>

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

How to separate body content with fixed header and footer for multiple pages

html

css

dompdf

page-break-inside

laravel

基本上，这种类型的应用程序称为单页应用程序