2012-01-08 2 views
12

Я использую поплавки в позиции 2 divs рядом друг с другом.Работа с css-поплавками в html2pdf

<a href="printbox.php">print</a> 
<?php ob_start(); ?> 
<style> 
    #sidedish{ 
     float: left; 

     border: 1px solid black; 
     width: 100px; 
     height: 100px; 
    } 
    #maindish{ 
     float: right; 
     width: 200px; 
     border: 1px solid black; 
     height: 100px; 
     text-align: center; 
    } 

    #container{ 
     width: 304px; 
     height: 100px; 
     border: 1px solid black; 
    } 
</style> 

<div id="container"> 
<div id="sidedish"></div> 
<div id="maindish"><div id="box">name</div></div> 
</div> 
<?php $_SESSION['boxes'] = ob_get_contents(); ?> 

Вот что PRINTBOX делать, он просто делает буферизованные данные в формате PDF, но как-то поплавки, которые были поставлены были потеряны в процессе.

<?php require_once('html2pdf/html2pdf.class.php'); ?> 
<?php 
$html2pdf = new HTML2PDF('P', 'A4', 'en', true, 'UTF-8', array(0, 0, 0, 0)); 
$html2pdf->writeHTML($_SESSION['boxes']); 

$html2pdf->Output('random.pdf'); 
?> 

Он отлично работает на HTML:

enter image description here

, но когда я нажимаю на печать получается так:

enter image description here

Любая идея, что проблема есть?

+1

Не нашли свою проблему. см. http://jsfiddle.net/DYGvR/show/, тест в chrome, щелчок правой кнопкой мыши, печать страницы. – Giberno

+0

Используете ли вы браузер для печати? Что делает printbox.php? Я предполагаю, что он нажимает на ссылку для печати, а printbox.php каким-то образом устанавливает ширину документа. – zethus

+0

см. Мое обновление –

ответ

23

Говоря из личного опыта, я бы сказал, что стиль оформления HTML2PDF - это, в лучшем случае, эзотерическая наука о черной магии. Основные причины этого являются:

  • Класса поддерживает только (относительно небольшого) подмножества стилей CSS & селекторов совместимость
  • CSS недокументирован
  • PDF невозможно отлаживать в связи с HTML входом

Справедливости ради, это не только вопрос для HTML2PDF, но also for the TCPDF that HTML2PDF uses.

Это может быть возможно, что HTML2PDF, будучи только почти-нулевой настройкой, быстрого & простого альтернативного интерфейса для TCPDF, порезов больше поддержки CSS от - но я уверен, что даже TCPDF не поддержат float правильно.

Лучшее решение, которое вы могли бы использовать, чтобы отправить плавающие дивы в девяностые:

<table> 
    <tr> 
     <td><div class="float"> ... </div></td> 
     <td><div class="float"> ... </div></td> 
    </tr> 
</table> 

Вы также могли бы скрыть эту неловкость от общественности HTML:

<?php 
    $isPdf = (/* condition that tells us we're outputting PDF */) ? true : false; 
    if ($isPdf) { 
     echo "<table><tr><td>"; 
    } 
?> 
<div class="float"> ... </div> 
<?php 
    if ($isPdf) { 
     echo "</td><td>"; 
    } 
?> 
<div class="float"> ... </div> 
<?php 
    if ($isPdf) { 
     echo "</td></tr></table>"; 
    } 
?> 
+1

Это было очень полезно для меня после того, как я разорвал свои волосы, пытаясь выяснить, как обходные решения css. Назад к столам! Кроме того, fyi, я создал совершенно другую копию страницы в вопросе целиком, и если бы это было для PDF, направить туда. Если бы это было не так, прямо к не-таблице. – Cyprus106

+2

У меня была та же проблема. Мое решение состояло в том, чтобы использовать абсолютное позиционирование вместо float, которое хорошо работало, но вам нужно установить размеры контейнера. – TheFrozenOne

+0

На самом деле, HTML2PDF поддерживает гораздо больше CSS, чем TCPDF, включая абсолютное позиционирование, поля и paddings. Стоит отметить. –

6

Вы можете увидеть быстрая документация онлайн на французском языке здесь: http://demo.html2pdf.fr/examples/pdf/about.pdf

('Les float ne sont gérés que pour la balise IMG')

= Поплавки обрабатываются только для img-разметки.

Обработанные свойства css также перечислены в документе.