我正在將基本HTML加載到DOMPDF中。在橫向模式下，第一個之後的所有頁面重疊。DOMPDF橫向輸出搞砸了

這裏是我的（基本）HTML這使得在瀏覽器罰款：

<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繪製邏輯：

$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紙嘗試爲好，同樣的結果。

我也試着在設置紙張之前移動渲染（），重疊的問題消失了，但它只會渲染爲肖像（此處嘗試A4）。

我還沒有嘗試輸出作爲實際的文件之前呈現在瀏覽器下載，但我會。

這是個什麼結果看起來像...... enter image description here

任何建議表示讚賞。謝謝。

====================================

UPDATE每請求從BrianS

感謝您的關注。這裏是呈現的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>

我不認爲那裏有什麼不尋常的東西，但也許我錯了。讓我知道你是否需要額外的信息。謝謝。

來源

2015-05-21 bfuzze

這是一個很奇怪的問題。它看起來像HTML或CSS中的某些內容正在破壞dompdf的佈局跟蹤。但是如果沒有看到導致問題的示例文檔（HTML和CSS）（而不是生成文檔的PHP），我們無法真正進行調試。 – BrianS

dompdf中的高度是棘手的事情，當你推動頁面邊界。對於整頁塊，我建議使用定位內容。如果這是不可能的，我會將DOMPDF_DPI設置爲72（PDF的固定「像素」深度），以便從HTML到PDF進行一對一的轉換。

一般來說，我建議使用百分比來更好地在頁面邊界內放置一個元素，除了dompdf在頁邊距附近更加模糊一些，所以如果您需要將內容適合於（這就是爲什麼我通常會爲整頁元素定位內容）。

在你的情況下，讓我們在橫向上使用A4紙張尺寸（因爲你提到過）。紙張大小/佈局可以爲您提供大約595像素的高度。將所有高度加起來，您的文檔就會完全超過（粗略估計大於1100），這意味着會發生分頁。 dompdf將容器的最後一行拖到下一頁。所以這解釋了初始塊的文本佈局。

至於爲什麼佈局在那之後突然崩潰......我不知道。通常情況下，佈局中斷是由於格式不完整的HTML造成的，但是你的就好了。我猜我會說一個父元素丟失在分頁導致空位置信息。這是我們必須看的。

之前，我繼續的一些注意事項：

你只需要在頁面級別設置頁邊距。如果我正確地記得，它定義了HTML元素的邊距。身體邊距未定義，因此默認爲0px。
身高和身高始終是頁面內容區域的高度/寬度;除非你真的希望身體不填充頁面，否則不需要設置它。
dompdf尚不支持box-sizing（否則這將會更簡單）。高度和寬度由內容框定義，並且額外的邊距/填充被添加到內容框中以獲得完整的框大小（並且要記住頁邊距周圍需要的神奇額外填充）。

我改變了你的HTML/CSS，使它做你想做的。越簡單越好，特別是對於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有其弱點的公平份額任何工具的工作。

來源

2015-05-26 18:57:51 BrianS

非常感謝這個有用的反饋。 DOMPDF處理類比內聯樣式更好還是無所謂？我會給你一個鏡頭，讓你儘快知道結果。 – bfuzze

dompdf應該能夠處理你的樣式，無論你如何定義它們（內聯對樣式表）。我編寫的HTML主要是爲了幫助可視化佈局/樣式。如果你想保留任何不應該發佈任何問題的相關CSS內聯。 – BrianS

DOMPDF橫向輸出搞砸了

UPDATE每請求從BrianS

回答

相關問題