在dompdf中制作一个图像覆盖所有的第一页
Make an image in dompdf cover all of the first page
我正在尝试获取一张图片来填充 dompdf pdf 的整页,之后的每一页都有页眉和页脚。使用下面的代码,它会创建附加的图像。我已经做了我能想到的一切来纠正这个问题,包括将所述图像的大小调整为 595px x 842px(A4 纸张大小)。我需要做什么特别的事情吗?
$html .="<style>
@page {
margin-top:130px;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
.flyleaf {
page-break-after: always;
margin:-130px;
padding:0;
}
.flyleaf img {
min-width: 100%;
min-height: 100%;
}
.header,
.footer {
width: 100%;
text-align: center;
position: fixed;
}
.header {
top: -110px;
}
.footer {
bottom: 0px;
}
</style>";
$html .='<div class="flyleaf" width="100%"><img style="max-width:100%;max-height:100%;" src="'.$header.'"></div>';
$html .='<div class="header">';
$html .='<td style="width:100px;"><img src="'.$logo.'"></td>';
$html .='</div>';
$html .='<div class="page">';
$html .='//Page content here';
$html .='</div>';
$html .='<div class="footer">';
$html .='//Footer content here';
$html .='</div>';
首先,dompdf 可能完全支持也可能不完全支持 min-width/min-height 样式。请参阅问题 #825。
其次,您使用 max-width/max-height 设置了图像样式。 dompdf 将按比例缩放图像,如果两个尺寸都最大为 100%,则缩放将停止,无论哪一侧先达到该限制。因此,如果您的图片与页面的比例不同,则缩放后的图片可能不会填满可见区域。如果您指定宽度,这应该不是什么问题,但有时 dompdf 在文档底部边缘附近会出现问题。
或者,至少,它应该是这样工作的。我必须做更多的测试才能找到当前的局限性。但是使用 v0.6.2 进行的一些快速测试并不能完全证明这一点。
最后,不要忘记 dompdf 的默认页边距为 1.2cm。 100% width/height 将基于受页边距限制的 body 元素的内容区域。
像这样为封面制作框架对我很有帮助:
#cover_sheet {
position : absolute;
top : 0px;
left : 0px;
right : 0px;
bottom : 0px;
overflow : hidden;
margin : 0;
padding : 0;
}
应该可以在那里输入比例正确的 .svg 图像。
检查这一点的有用页面是 http://eclecticgeek.com/dompdf/debug.php
我正在尝试获取一张图片来填充 dompdf pdf 的整页,之后的每一页都有页眉和页脚。使用下面的代码,它会创建附加的图像。我已经做了我能想到的一切来纠正这个问题,包括将所述图像的大小调整为 595px x 842px(A4 纸张大小)。我需要做什么特别的事情吗?
$html .="<style>
@page {
margin-top:130px;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
.flyleaf {
page-break-after: always;
margin:-130px;
padding:0;
}
.flyleaf img {
min-width: 100%;
min-height: 100%;
}
.header,
.footer {
width: 100%;
text-align: center;
position: fixed;
}
.header {
top: -110px;
}
.footer {
bottom: 0px;
}
</style>";
$html .='<div class="flyleaf" width="100%"><img style="max-width:100%;max-height:100%;" src="'.$header.'"></div>';
$html .='<div class="header">';
$html .='<td style="width:100px;"><img src="'.$logo.'"></td>';
$html .='</div>';
$html .='<div class="page">';
$html .='//Page content here';
$html .='</div>';
$html .='<div class="footer">';
$html .='//Footer content here';
$html .='</div>';
首先,dompdf 可能完全支持也可能不完全支持 min-width/min-height 样式。请参阅问题 #825。
其次,您使用 max-width/max-height 设置了图像样式。 dompdf 将按比例缩放图像,如果两个尺寸都最大为 100%,则缩放将停止,无论哪一侧先达到该限制。因此,如果您的图片与页面的比例不同,则缩放后的图片可能不会填满可见区域。如果您指定宽度,这应该不是什么问题,但有时 dompdf 在文档底部边缘附近会出现问题。
或者,至少,它应该是这样工作的。我必须做更多的测试才能找到当前的局限性。但是使用 v0.6.2 进行的一些快速测试并不能完全证明这一点。
最后,不要忘记 dompdf 的默认页边距为 1.2cm。 100% width/height 将基于受页边距限制的 body 元素的内容区域。
像这样为封面制作框架对我很有帮助:
#cover_sheet {
position : absolute;
top : 0px;
left : 0px;
right : 0px;
bottom : 0px;
overflow : hidden;
margin : 0;
padding : 0;
}
应该可以在那里输入比例正确的 .svg 图像。
检查这一点的有用页面是 http://eclecticgeek.com/dompdf/debug.php