如何将正文内容与多个页面的固定页眉和页脚分开
Posted
技术标签:
【中文标题】如何将正文内容与多个页面的固定页眉和页脚分开【英文标题】：How to separate body content with fixed header and footer for multiple pages 【发布时间】：2016-10-31 22:27:56 【问题描述】：我有三个单独的部分，分别是 header、body 和 footer 来创建 pdf。
页眉部分将始终位于每个页面的顶部，并且会被修复。
______________________
| header |
|______________________|
问题在于正文内容，如果内容很大，它会转到第二页。
______________________
| |
| |
| body |
| |
| |
|______________________|
页脚部分将始终位于每个页面的底部，并且它也会修复。
______________________
| footer |
|______________________|
所以如果内容很大并且创建了两个页面，那么我应该得到两个页面：
______________________
| header |
|______________________|
| |
| |
| Body Part1 |
| |
| |
|______________________|
| footer |
|______________________|
还有
______________________
| header |
|______________________|
| |
| |
| Body part2 |
| |
| |
|______________________|
| footer |
|______________________|
我尝试使用table format，它适用于页眉和内容，但不适用于页脚。页脚只出现在第二页的底部而不是第一页。
我正在使用 laravel dompdf
任何帮助将不胜感激。
【问题讨论】：
我不知道为什么人们投票结束这个问题，你也可以评论一下吗？ 你是为网页做的还是为一些pdf做的？？ 从html创建pdf 你用的是什么插件？？ 我正在使用 laravel 的 dompdf ，顺便说一句，我在第一行提到to create pdf，如果您能提供帮助，请您使用在线 pdf 转换器 html 提供解决方案（css） 987654323@
【参考方案1】：
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 对您来说不是问题，但我遇到的任何浏览器都不会打印这些区域，因此对于常规打印样式表来说并不那么实用。
虽然您可以使用 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>
【讨论】：
你也可以分享一个html示例吗？ @Festo：上面的示例无需对 HTML 标记进行额外更改即可工作 - 您可以通过 CSS 添加所有内容。下面的示例只需要一个页眉和页脚元素，它可以容纳他们需要的任何元素。我更新了答案，详细说明了这两个因素。 很抱歉，使用*** css + html 通过laravel dompdf 生成 pdf 不起作用，每个页面的页眉和页脚都没有 :(
@Festo：如果你说“*** CSS 和 HTML”，你指的是哪个代码？我的答案的第一部分（水平线以上的所有内容）不需要任何额外的标记，除非您尝试使用不支持页面区域的渲染器生成 CSS（例如一个网络浏览器），它应该完美呈现。如果您需要使用浏览器生成输出（或希望查看器能够），请使用底部解决方案（水平线以下的所有内容）。
我同时使用了代码 1.screencast.com/t/4MPlcOYy2J 和 2.screencast.com/t/yjFkiNp3vNsA 我从这两个代码中都得到了这个输出：screencast.com/t/AkVbIEuRxUXO【参考方案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>【讨论】：
我按照你说的尝试了它忽略第一页：content.screencast.com/users/Niklesh2/folders/Jing/media/… @Festo 你能参考我更新的答案吗？希望它有效...！ @Festo 好的，你能参考我上次更新的 css 吗？ 先生：使用此代码，我可以根据需要制作 pdf：screencast.com/t/bFTGlTap2Je，感谢您的所有支持 仅供参考，您可能需要添加一些页边距 (@page margin: 120px 50px; )，然后使用负定位 (header top: -100px; ... ;) 将页眉/页脚放入该空间。如果你不这样做，你可能会导致页眉/页脚与内容重叠。【参考方案3】：
我再次检查了这个有用的答案：https://***.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 ><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 工作的其他人有所帮助。
干杯！！
【讨论】：
【参考方案4】：基本上，这种类型的应用程序称为单页应用程序
>在这种需求中请使用 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>
【讨论】：
亲爱的，如果您正在寻找其他替代品，请告诉我。 我不明白，我怎样才能从你的代码生成pdf，你能详细解释一下吗，幸运的是我正在使用Angular和Laravel，如果我能用角度来做就太好了。以上是关于如何将正文内容与多个页面的固定页眉和页脚分开的主要内容，如果未能解决你的问题，请参考以下文章