在HTML2PDF中使用CSS浮动 [英] Working with css floats in html2pdf

问题描述

我使用浮动控件将2个div彼此并排放置。

I'm using floats to position 2 divs beside each other.

<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，但以某种方式将其浮动被设置在过程中丢失。

Here is what printbox do, it just renders the buffered data into a pdf, but somehow the floats that were set were lost in the process.

<?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上工作良好：

It works fine on html:

但是当我单击打印它会变成这样：

but when I click on print it turns to this:

有什么问题吗？

推荐答案

从就个人经历而言，我想说 HTML2PDF 的输出样式充其量不过是深奥的黑魔法科学。造成这种情况的主要原因是：

Speaking from personal experiences, I would say styling the output of HTML2PDF is, at best, esoteric black magic science. The main reasons for this are:

• 该类仅支持（相对较小）CSS样式和选择器


• 未记录CSS兼容性


• 无法相对于HTML输入调试PDF

为了公平起见，这不仅是 HTML2PDF 的问题，而且是也适用于 HTML2PDF 使用的 TCPDF 。

To be fair, this is not only the issue for HTML2PDF but also for the TCPDF that HTML2PDF uses.

HTML2PDF 可能几乎是零设置，快速& TCPDF 的简单替代界面，减少了更多CSS支持-但我敢肯定甚至 TCPDF 不会正确支持 float 。

It might be possible that HTML2PDF, being just an almost-zero-setup, quick & easy alternative interface for the TCPDF, cuts more CSS support off — but I'm sure that even TCPDF wouldn't support float properly.

最好的解决方法是发送浮动div到90年代：

The best workaround that you could use is to send your floating divs to the nineties:

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

您也可以在公共HTML中隐藏这种尴尬：

You could also hide this embarrassment from the public 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>";
    }
?>

这篇关于在HTML2PDF中使用CSS浮动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！