laravel 如何使用固定页眉和页脚分隔多个页面的正文内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38095778/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to separate body content with fixed header and footer for multiple pages
提问by Drone
I Have three separate section as header, bodyand footerto create pdf.
我有三个单独的部分作为header,body并footer创建 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
我正在使用laravel dompdf
Any help would appreciated.
任何帮助将不胜感激。
采纳答案by Drone
I checked this helpful answer : https://stackoverflow.com/a/1763683/5830872again and with some changes and external div tag Its working for me.
我再次检查了这个有用的答案：https: //stackoverflow.com/a/1763683/5830872并进行了一些更改和外部 div 标签它对我有用。
I don't Know how laravel dompdf converts this html to pdf but it works for me.
我不知道 laravel dompdf 如何将此 html 转换为 pdf，但它对我有用。
Here is my laravel code
这是我的 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();
});
Which generating pdf like this : http://content.screencast.com/users/Niklesh2/folders/Jing/media/13bb7a6f-f280-46db-94df-1af6270b4b02/2016-08-10_1713.png
生成这样的pdf：http: //content.screencast.com/users/Niklesh2/folders/Jing/media/13bb7a6f-f280-46db-94df-1af6270b4b02/2016-08-10_1713.png
I am sorry I am not able to tell you how its working. But may be helpful for others who is working in laravel dompdf.
很抱歉，我无法告诉您它是如何工作的。但可能对在 laravel dompdf 中工作的其他人有所帮助。
cheers !!
干杯！！
回答by TheThirdMan
HTML assumes a constant uninterrupted sequence of elements, while printed pages require to split that content into sections. The best an interpreter can do without you telling it otherwise is to seperate elements onto pages so that most of them fits on a single page.
HTML 假定元素的连续不间断序列，而打印页面需要将该内容拆分为多个部分。最好的解释器在你不告诉它的情况下可以做的就是将元素分开到页面上，以便它们中的大多数适合单个页面。
This very exhaustive article on SmashingMagazinewill tell you a lot about how to use CSS to design HTML for print.
这篇关于 SmashingMagazine 的非常详尽的文章将告诉您很多有关如何使用 CSS 设计用于打印的 HTML 的信息。
Most importantly for your question, it will elaborate on @pageregions on a tidy sheet. Relevant for you will likely be the top-centerand bottom-centerregions (which, unlike you might think looking at te document, may very well extend to the entire width of the document).
对于您的问题最重要的是，它将在 tidy sheet 上详细说明@page区域。与您相关的可能是和区域（与您在查看文档时可能认为的不同，它很可能会扩展到文档的整个宽度）。top-centerbottom-center
Using these regions, you can define header and footer via CSS, and even style them depending on the side of the fold they're on if you're designing a book. These work by adding content directly per CSS, so it doesn't require any markup in your HTML to work.
使用这些区域，您可以通过 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;
}
}
Though a non-issue for you since you're using laravel, no browser I've come accross will print those regions, so it won't be all that practical for regular print stylesheets.
虽然自从您使用 laravel 以来这对您来说不是问题，但我遇到的任何浏览器都不会打印这些区域，因此对于常规打印样式表来说它并不是那么实用。
While you can do a lot with CSS, you might have content that is too complex to create it in the above way. In this case, you can use an element with the position:fixedproperty, which will render on the top/bottom of every page, depending on how you style it - for example like this:
虽然您可以使用 CSS 做很多事情，但您的内容可能过于复杂而无法以上述方式创建。在这种情况下，您可以使用具有position:fixed属性的元素，该元素将呈现在每个页面的顶部/底部，具体取决于您如何设置它的样式 - 例如像这样：
@media print {
header {
position: fixed;
top: 0;
}
footer {
position: fixed;
bottom: 0;
}
}
HTML:
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>
回答by Vishal Panara
Try the below code in full view.
在完整视图中尝试以下代码。
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>回答by Lokesh Kumar
Basically, This type of application referred as Single Page Application
基本上，这种类型的应用程序称为单页应用程序
> Please use power of AngularJs in this type of requirement, it has strength of routing.
> 请在此类需求中使用 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>
