web-dev-qa-db-ja.com

html2pdfでのCSSフロートの操作

フロートを使用して、2つの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でうまくいきます：

enter image description here

しかし、印刷をクリックすると、次のようになります。

enter image description here

問題は何ですか？

csscss-floathtml2pdf
14
Wern Ancheta

個人的な経験から言えば、HTML2PDFの出力のスタイル設定は、せいぜい難解な黒魔術の科学だと言えます。この主な理由は次のとおりです。

  • クラスはCSSスタイルとセレクターの（比較的小さい）サブセットのみをサポートします
  • CSSの互換性は文書化されていません
  • HTML入力に関してPDFをデバッグすることは不可能です

公平に言うと、これはHTML2PDFの問題だけでなく、 HTML2PDFが使用するTCPDFの場合も の問題です。

mightHTML2PDFは、ほぼゼロのセットアップであり、TCPDFの迅速で簡単な代替インターフェースであるため、CSSサポートを削減できる可能性がありますオフ—しかし、TCPDFがfloatを適切にサポートしないと確信しています。

使用できる最善の回避策は、フローティングdivを90年代に送信することです。

<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>";
    }
?>
25
Jari Keinänen

オンラインで簡単なドキュメントをフランス語でここで見ることができます： http://demo.html2pdf.fr/examples/pdf/about.pdf

（ 'Les float ne sontgérésque pour la balise IMG'）

=フロートは、クラスによってimgマークアップに対してのみ処理されます。

処理されるcssプロパティもドキュメントにリストされています。

7
Cedo