Trabajando con flotadores css en html2pdf

Question

Estoy usando flotadores para colocar 2 divs uno al lado del otro.

<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(); ?> 

Esto es lo que Printbox hacer, sólo hace que los datos almacenados en un pdf, pero de alguna manera los flotadores que se establecieron se perdieron en el proceso.

<?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'); 
?> 

Funciona bien en html:

pero cuando hago clic en la impresión se convierte en esto:

Cualquier idea de lo que es el problema?

Answer 1

Hablando de experiencias personales, diría que el diseño de la salida de HTML2PDF es, en el mejor de los casos, la ciencia de la magia negra esotérica. Las principales razones para esto son:

• La clase sólo es compatible con un (relativamente pequeño) subconjunto de estilos CSS & selectores compatibilidad
• CSS es indocumentado
• PDF es imposible depurar en relación con la entrada HTML

Para ser justos, este no es solo el problema para HTML2PDF sino also for the TCPDF that HTML2PDF uses.

Se podría ser posible que HTML2PDF, siendo sólo una casi-cero-configuración, rápida & interfaz alternativa fácil para el TCPDF, corta más apoyo CSS fuera - pero estoy seguro de que incluso TCPDF no apoyarían float correctamente.

La mejor solución que se puede utilizar es la de enviar su divs flotantes de los años noventa:

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

También puede ocultar esta vergüenza del HTML pública:

<?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>"; 
    } 
?> 

Answer 2

se puede ver la documentación rápida en línea en francés aquí: http://demo.html2pdf.fr/examples/pdf/about.pdf

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

= Los flotantes solo se manejan para las marcas de img por clase.

Las propiedades de css manipuladas también se enumeran en el documento.