DOMPDF景观输出混乱 [英] DOMPDF landscape output is messed up
问题描述
我正在将基本HTML加载到DOMPDF中.在横向模式下，第一页之后的所有页面都是重叠的.
I'm loading basic HTML into DOMPDF. In landscape mode, all the pages after the first are overlapping.
这是我的(基本)HTML，可在浏览器中很好地呈现:
Here is my (basic) HTML which renders fine in the browser:
<div id="certificates-layout-1" style="<?php echo $styles['outer-container']; ?>">
<div style="<?php echo $styles['inner-container']; ?>">
<div style="<?php echo $styles['fullname']; ?>">
<?php echo $data['fullname']; ?>
</div>
<div style="<?php echo $styles['fullcouncil']; ?>">
<?php echo $data['fullcouncil']; ?>
</div>
<div style="<?php echo $styles['session_date']; ?>">
<?php echo $data['session_date']; ?>
</div>
</div>
</div>
这是我的DOMPDF渲染逻辑:
Here is my DOMPDF render logic:
$filename = (isset($params['filename'])) ? $params['filename'] : 'ubcdet_report_' . date('YmdHis') . '.pdf';
$lib = $_SERVER['DOCUMENT_ROOT'] . '/sites/all/libraries/vendor/';
require_once($lib . "dompdf/dompdf/dompdf_config.inc.php");
$dompdf = new DOMPDF();
$dompdf->load_html($report);
$dompdf->set_paper('letter', 'landscape');
$dompdf->render();
$dompdf->stream($filename, array("Attachment" => false));
exit(0);
我也尝试过A4纸，结果相同.
I tried with A4 paper as well, same result.
我还尝试在set-paper之前移动render()，重叠的问题消失了，但是它只能以纵向渲染(这里也尝试过A4).
I also tried moving the render() BEFORE set-paper and the overlapping issue goes away, but it will ONLY render as portrait (tried A4 here as well).
在渲染到浏览器中进行下载之前，我没有尝试输出为实际文件，但是我会的.
I have not tried outputing as actual file before rendering in browser for download, but I will.
结果是这样的...
This is what the result looks like...
任何建议表示赞赏.谢谢.
Any suggestions appreciated. Thanks.
===================================
====================================
感谢您的关注.这是呈现的HTML的转储:
Thanks for your attention. Here is a dump of the rendered HTML:
<html>
<head></head>
<body>
<div id="certificates-layout-1" style="font-family: Times New Roman; font-size:33px; text-align:center; page-break-after:auto;">
<div style="height:672px; width: 906px; border: thin solid #666666;">
<div style="font-size:45px; font-weight:bold; margin-top:96px; margin-bottom:10px;">John Smith</div>
<div style="margin-bottom:125px;">Council of Councils</div>
<div style="font-weight:bold;">April 16 - 19, 2015</div>
</div>
</div>
<style>
@font-face {
font-family: TimesBold;
src: url('/sites/all/modules/ubcdet/ubcdet_report/fonts/timesbd.ttf');
}
</style>
<style>
}
@page {
margin: 0;
}
html {
margin: 72px 76px;
}
body {
width: 1056px;
margin:0;
}
.hint {
background: none repeat scroll 0 0 #6AEA91;
font-size: 13px;
padding: 50px 10px;
text-align: center;
width: 250px;
position: absolute;
}
@media print {
.hint {
display:none;
}
}
</style>
</body>
</html>
我认为其中没有什么异常之处，但也许我错了.让我知道您是否需要其他信息.谢谢.
I don't think there's anything too unusual in there, but maybe I'm wrong. Let me know if you need additional information. Thanks.
推荐答案
在突破页面边界时，高度在dompdf中是一件棘手的事情.对于整页块，我建议使用定位内容.如果无法做到这一点，我将DOMPDF_DPI设置为72(PDF的固定像素"深度)，以便从HTML到PDF进行一对一翻译.
Heights are a tricky thing in dompdf when you're pushing against the page boundaries. For full-page blocks I recommend using positioned content. If this isn't possible I'd set DOMPDF_DPI to 72 (the fixed "pixel" depth of a PDF) so that you get a one-to-one translation from HTML to PDF.
通常，我建议使用百分数将元素更好地放置在页面边界内，除了dompdf在页面边距周围有些模糊之外，因此如果您需要在页面上放置内容，则必须在其中添加一些额外的像素(这就是为什么我通常会搜索整页元素的定位内容的原因.)
In general I suggest using percents to better place an element within the page boundaries, except that dompdf is a bit more fuzzy around the page margins so you have to give a few extra pixels there if you need to fit content to a page (this is why I usually go for positioned content for full-page elements).
在您的情况下，让我们在横向中使用A4纸张大小(因为您已经提到过).该纸张尺寸/布局可为您提供大约595像素的高度.将文档的所有高度加起来，总会超过该高度(粗略估计为> 1100)，这意味着将发生分页. dompdf将容器的最后一行拖到下一页.因此，这说明了初始块的文本布局.
In your case let's work with a paper size of A4 in landscape (since you mentioned it). That paper size/layout gives you a height of roughly 595 pixels. Adding up all the heights your document totally blows past that (>1100 in a rough estimate) which means paging will occur. dompdf is dragging the last line of the container to the next page. So this explains the text layout for the initial block.
至于为什么在那之后布局如此糟糕……我不知道.通常，布局中断是由于格式不正确的HTML造成的，但是您的使用就很好了.我猜我会说一个父元素在分页符丢失了，导致空的定位信息.这是我们必须要看的东西.
As for why the layout breaks so horribly after that ... I have no idea. Usually a layout break is due to poorly-formed HTML, but yours is just fine. Were I to guess I'd say a parent element is lost on page break resulting in null positioning information. This is something we'll have to look at.
在我继续一些笔记之前，
Before I continue some notes:
- 您只需要在页面级别上设置页边距.如果我没记错的话，那就定义了HTML元素的边距.主体边距未定义，因此默认为0px.
- 正文的高度和宽度始终是页面内容区域的高度/宽度；除非您确实希望正文不填满页面，否则无需进行设置.
- dompdf尚不支持
box-sizing(否则，这将更加简单).高度和宽度由 content 框定义，多余的边距/填充被添加到内容框中以获取完整的框尺寸(还要记住，页面边距周围需要神秘的额外填充).
- You only need to set margins on the page level. If I recall correctly that defines the margin for the HTML element. The body margin is not defined and so default to 0px.
- body height and width is always the height/width of the page content area; no need to set that unless you really want the body to not fill the page.
- dompdf does not yet support
box-sizing(otherwise this would all be much simpler). height and width are defined by the content box and extra margin/padding is added to the content box to get the full box size (plus keep in mind the mysterious extra padding required around the page margins).
我对您的HTML/CSS进行了一些更改，使其可以执行您想要的操作.越简单越好，尤其是对于dompdf.
I changed up your HTML/CSS a bit to make it do what you want. Simpler is better, especially for dompdf.
<html>
<head>
<style>
@page {
size: a4 landscape;
margin: 72px 76px;
}
body {
font-family: Times New Roman;
font-size: 33px;
text-align: center;
border: thin solid #666666;
}
.certificate-name {
font-size: 45px;
font-weight: bold;
margin-top: 96px;
margin-bottom:10px;
}
.certificate-title {
margin-bottom: 125px;
}
.certificate-date {
font-weight: bold;
}
</style>
</head>
<body>
<div id="certificates-layout-1">
<div class="certificate-name">John Smith</div>
<div class="certificate-title">Council of Councils</div>
<div class="certificate-date">April 16 - 19, 2015</div>
</div>
<div id="certificates-layout-2">
<div class="certificate-name">John Smith</div>
<div class="certificate-title">Council of Councils</div>
<div class="certificate-date">April 16 - 19, 2015</div>
</div>
</body>
</html>
使用任何工具时，都应牢记它的优点和缺点……而dompdf有很多缺点.
When working with any tools you should always keep in mind it's strength and weaknesses ... and dompdf has its fair share of weaknesses.
这篇关于DOMPDF景观输出混乱的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
