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

Question

I Have three separate section as header, body and footer to create pdf.

Header part will come always at top of each page and it will be fix.

 ______________________
|        header        |
|______________________|

Problem is with body content, if content is big it will go to second page.

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

Footer part will come always at bottom of each page and it will also fix.

 ______________________
|        footer        |
|______________________|

So If content is big and if two pages created then I should get two pages as:

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

And

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

I tried with table format, It is working for header and content, but not worked for footer. Footer is coming only in bottom of second page not in first page.

I am using laravel dompdf

Any help would appreciated.

score 11 · Accepted Answer

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;
  }
}

虽然因为您使用 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>

score 4 · Accepted Answer

尝试以下代码的完整视图。

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>

score 3 · Accepted Answer

我再次检查了这个有用的答案：https ://stackoverflow.com/a/1763683/5830872并进行了一些更改和外部 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 工作的其他人有所帮助。

干杯！！

score 0 · Accepted Answer

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

> 请在此类需求中使用 AngularJs 的强大功能，它具有路由强度。

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

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

4 回答 4

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

Related

Reference