在html2pdf中处理css浮动效果

Question

我正在使用浮动来使两个div并排放置。

<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上它运行良好：

但是当我点击打印时，它变成了这样：

有什么问题的想法吗？

- Wern Ancheta

---

未发现您提到的问题。请参见http://jsfiddle.net/DYGvR/show/，在Chrome中测试，单击鼠标右键，页面打印。 - Giberno

您是否使用浏览器进行打印？printbox.php是用来做什么的？我猜他点击了打印链接，printbox.php会在文档上设置一个宽度。 - zethus

Answer 1

从个人经验来看，我会说样式化HTML2PDF的输出，在最好的情况下也是一门神秘的黑魔法。这主要原因是:

• 该类仅支持CSS样式和选择器的（相对较小的）子集
• CSS兼容性未记录
• 与HTML输入相关的PDF不可能进行调试

公平地说，这不仅是HTML2PDF的问题，但它还是使用HTML2PDF的TCPDF也存在同样的问题。

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

- Jari Keinänen

---

这对我非常有帮助，因为我曾经在试图找出CSS解决方法时感到非常困惑。回到表格吧！另外，顺便说一下，我创建了一个完全不同的页面副本，如果是为了PDF，就直接跳转到那里。如果不是，就跳转到非表格页面。 - Cyprus106

我曾经遇到过同样的问题。我的解决方案是使用绝对定位而不是浮动，这很有效，但你需要设置容器的尺寸。 - TheFrozenOne

实际上，HTML2PDF支持的CSS比TCPDF多得多，包括绝对定位、边距和填充等。值得一提。 - user3714134

Answer 2

你可以在这里在线查看法语的快速文档： http://demo.html2pdf.fr/examples/pdf/about.pdf ('Les float ne sont gérés que pour la balise IMG')

=该类仅处理图片标记的浮动。

文档中还列出了处理的css属性。

- Cedo