在dompdf中创建一个覆盖所有第一页的图像

时间:2016-02-18 14:38:00

标签: html css dompdf

我正在尝试获取图像以填充dompdf pdf的整个页面,之后每个页面都有页眉和页脚。使用下面的代码,它会创建附加的图像。我已经做了我能想到的所有事情来纠正这个问题,包括将所述图像的大小调整为595px(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>';

Image Example

2 个答案:

答案 0 :(得分:0)

首先,dompdf可能会或可能不会完全支持min-width / min-height样式。请参阅问题#825

其次,您使用max-width / max-height设置了图像样式。 dompdf将按比例缩放图像,如果两个尺寸都是最大100%,则缩放将停止,无论哪一边达到该限制。因此,如果您的图像与页面的比例不同,则缩放图像可能无法填充可见区域。如果指定宽度,这应该不是问题,尽管有时dompdf在文档的下边缘附近有问题。

或者,至少,它应该如何运作。我必须做更多测试才能找到当前的限制。但是使用v0.6.2进行的一些快速测试并不能完全证实这一点。

最后,不要忘记dompdf的默认页边距为1.2厘米。 100%宽度/高度将基于由页边距约束的body元素的内容区域。

答案 1 :(得分:0)

对我来说非常有用的是为封面制作一个框架,如下所示:

#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