我有三个单独的部分作为 header ， body 和 footer 来创建pdf。
标题部分将始终位于每个页面的顶部，它将被修复。
＆＃xA;＆＃xA; ______________________＆＃xA; |标题|＆＃xA; | ______________________ |＆＃xA; ＆＃xA;＆＃xA; 问题在于正文内容，如果内容很大，则会转到第二页。< ＆p>＆＃xA;＆＃xA;
______________________＆＃xA; | |＆＃XA; | |＆＃XA; |身体|＆＃xA; | |＆＃XA; | |＆＃xA; | ______________________ |＆＃xA; ＆＃xA;＆＃xA; 页脚部分将始终位于每个页面的底部，并且还会修复。
＆＃xA;＆＃xA; ______________________＆＃xA; |页脚|＆＃xA; | ______________________ |＆＃xA; ＆＃xA;＆＃xA; 所以如果内容很大，如果创建了两个页面，那么我应该得到两个页面：
＆＃xA;＆＃xA; ______________________＆＃xA; |标题|＆＃xA; | ______________________ |＆＃xA; | |＆＃XA; | |＆＃XA; | Body Part1 |＆＃xA; | |＆＃XA; | |＆＃XA; | ______________________ |＆＃XA; |页脚|＆＃xA; | ______________________ |＆＃xA; ＆＃xA;＆＃xA; 和
＆＃xA;＆＃xA; ______________________＆＃xA; |标题|＆＃xA; | ______________________ |＆＃xA; | |＆＃XA; | |＆＃XA; |正文part2 |＆＃xA; | |＆＃XA; | |＆＃XA; | ______________________ |＆＃XA; |页脚|＆＃xA; | ______________________ |＆＃xA; ＆＃xA;＆＃xA; 我试过表格式，它适用于标题和内容，但不适用于页脚。页脚仅在第二页的底部而不是在第一页中。
＆＃xA;＆＃xA;我正在使用 laravel dompdf
＆＃xA;＆＃xA;任何帮助都会受到赞赏。
＆＃XA;答案 0 :(得分：11)
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后没有问题，但我没有浏览过的浏览器会打印这些区域，因此对于常规打印样式表而言，它不会是实用的。< / p>
虽然你可以用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>
答案 1 :(得分：3)
在完整视图中尝试以下代码。
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>
答案 2 :(得分：3)
我再次检查了这个有用的答案：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();
});
对不起，我无法告诉你它是如何工作的。但对于在laravel dompdf工作的其他人可能会有帮助。
欢呼!!答案 3 :(得分：0)
＆GT;请在此类要求中使用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>