我可以使用什么 css 替代方案来替代不支持的边距顶部:自动使用 mpdf 来模拟 a4 页面上的页脚?

Question

我正在尝试使用 mpdf 从我的原始 wyswyg 生成 1：1 a4 页面到 pdf。 所以使用这个 css：

#editor {
background-color: gray;
border: 1px black;
padding: 1em 2em;
}
.page {
background-color: white;
border-style: solid;
border-color: black;
border-width: 1px;
/*padding: 10em 2em;*/
width: 595px;
height: 841px;
display: flex;
flex-direction: column;
}
.content {
word-wrap: break-word;
overflow-wrap: break-word;
white-space: normal;
padding-left: 2cm;
padding-bottom: 2cm;
padding-top: 2cm;
outline-color: white;
}
.header {
background-color: red;
text-align: center;
}
.footer {
background-color: darkgray;
margin-top: auto;
height: 100px;
page-break-after:right;
}
.brasao {
height: 60px;
width: 60px;
}
#template {
display: none;
}

应用于此HTML + JS：https://jsitor.com/FWvNJa7XN 如您所见，至少在div 页脚上使用margin-top：auto，至少在 Web 浏览器上，我能够将页脚粘贴在每个页面的底部。

但是当我尝试使用 mpdf 编写时：

<?php
use MpdfMpdf;
use MpdfOutputDestination;
include 'vendor' . DIRECTORY_SEPARATOR . 'autoload.php';
$mpdf = new Mpdf();
//via JS as I able to send each page outerHTML separated on hidden values
$pages = $_REQUEST['pages'];
$mpdf = new MpdfMpdf([
'mode' => 'utf-8',
'format' => 'A4',
'margin_left' => 0,
'margin_right' => 0,
'margin_top' => 0,
'margin_bottom' => 0,
'margin_header' => 0,
'margin_footer' => 0,
'dpi' => 72
]);
$stylesheet = file_get_contents('redator.css');
$mpdf->WriteHTML($stylesheet, MpdfHTMLParserMode::HEADER_CSS);
foreach ($pages as $page) {
$mpdf->WriteHTML($page);
}
$mpdf->Output();

在火狐上渲染的是这样的(包括编辑器div(： https://i.stack.imgur.com/C14vY.png

但是，使用 mpdf，结果不是预期的： https://www.docdroid.net/vP4QALq/mpdf.pdf

那么，如何尝试在 mpdf 上渲染 1：1？

Answer 1

解决方案 1：您可以添加

.content{
...
flex:auto;
...
}

并根据需要设置页眉和页脚的高度。

解决方案 2：让页眉和页脚的高度分别为 100px 和高度

.footer {
...
position:absolute;
bottom:0;
height:100px;
...
}

.header{
height:100px;
}
.content{
height:calc(100% - 200px);
}
.page{
position:relative;
}

解决方案 3只需根据需要在页眉、页脚和内容类中提供固定高度

Answer 2

我不知道这个pdf库，但你可以试试：

.footer {
background-color: darkgray;
/* absolute position */
position: absolute;
/* stick to bottom */
bottom: 0;
/* give it full width */
width: 100%;
height: 100px;
page-break-after:right;
}
.page {
background-color: white;
border-style: solid;
border-color: black;
border-width: 1px;
/*padding: 10em 2em;*/
width: 595px;
height: 841px;
display: flex;
flex-direction: column;
/* make the header relative to your page element */
position: relative;
}

Answer 3

您可以像这样设置绝对值：

#editor {
background-color: gray;
border: 1px black;
padding: 1em 2em;
}
.page {
background-color: white;
border-style: solid;
border-color: black;
border-width: 1px;
/*padding: 10em 2em;*/
width: 595px;
height: 841px;
display: flex;
flex-direction: column;
}
.content {
word-wrap: break-word;
overflow-wrap: break-word;
white-space: normal;
padding-left: 2cm;
padding-bottom: 2cm;
padding-top: 2cm;
outline-color: white;
}
.header {
background-color: red;
text-align: center;
}
.footer {
background-color: darkgray;
position:absolute;
width:595px;
top:817px;
height: 100px;
page-break-after:right;
}
.brasao {
height: 60px;
width: 60px;
}
#template {
display: none;
}

这在浏览器中呈现正常。

还可以以编程方式呈现它们。 请参阅此文档：https：//mpdf.：github.io/headers-footers/method-4.html

有趣的是，使用文档中描述的 @page 属性进行尝试： https://mpdf.github.io/css-stylesheets/supported-css.html

@page

设置"页面框"的大小，该大小通常与文档中的恒定大小工作表一起使用，如 CSS2 @paged媒体规范中所示。

我想它会是这样的：

@page {
//your CSS
}

Answer 4

1( 到底部的固定页脚 将下面的 css 替换为您的 css

#editor {
background-color: gray;
border: 1px black;
padding: 1em 2em;
}
.page {
background-color: white;
border-style: solid;
border-color: black;
border-width: 1px;
/*padding: 10em 2em;*/
width: 595px;
height: 841px;
display: flex;
flex-direction: column;
position:relative;
}
.content {
word-wrap: break-word;
overflow-wrap: break-word;
white-space: normal;
padding-left: 2cm;
padding-bottom: 2cm;
padding-top: 2cm;
outline-color: white;
}
.header {
background-color: red;
text-align: center;
}
.footer {
background-color: darkgray;
margin-top: auto;
height: 100px;
page-break-after:right;
width:inherit;
position:absolute;
bottom:0;
}
.brasao {
height: 60px;
width: 60px;
}
#template {
display: none;
}

2(要生成A4页面，请在代码下面尝试，它对我有用

$mpdf = new MpdfMpdf([
'mode' => 'utf-8',
'format' => 'A4'
]);

Answer 5

在普通CSS中，您将设置页脚的position: absolute;并将其放在底部。 为了不隐藏后面的内容，请在页面上添加一个与页脚高度相同的margin-bottom。

.page {
position: relative;
margin-bottom: 100px;
}
.footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
heigth: 100px;
}