web-dev-qa-db-ja.com

TwitterをbootstrapページにPDF with wkhtmltopdf：span issue

Symfony2 Bundle KnpSnappyBundle を使用して、html twigテンプレートをPDFに変換します。

KnpSnappyBundle は、ベースの Snappy ラッパーで、 wkhtmltopdf を使用します。

私のテンプレートは Twitterブートストラップ 2.3.2 cssを使用しています：

<div class="container">
    <div class="row">
        <div class="span12">
            <h4>TITLE</h4>
        </div>
    </div>
    <div class="row">
        <div class="span6" id="customers">
            <h5>TITLE</h5>

            <p>TEXT</p>

            <ul class="unstyled">
                <li>LIST ITEM</li>
                <li>LIST ITEM</li>
                <li>LIST ITEM</li>
                <li>LIST ITEM</li>
            </ul>
        </div>
        <div class="span6" id="estimate">
            <h5>TITLE</h5>

            <ul class="unstyled">
                <li>LIST ITEM</li>
                <li>LIST ITEM</li>
                <li>LIST ITEM</li>
                <li>LIST ITEM</li>
            </ul>
        </div>
    </div>
</div>

問題：顧客と見積スパンは、本来あるべき行と同じ行にありません。何が起こっているのか分かりません。

htmlcsstwitter-bootstrappdf-generationwkhtmltopdf
25
user1254498

Bootstrap3のソリューションは次のとおりです。常に.col-xs-nを使用します。

理由は、wkhtmltopdfが@mediaブロックのcssをサポートしていなかったためです。 bootstrap3では、col-xs-nのみが@mediaブロックの外側を支配します。

Bootstrap2.3.2 cssを確認しましたが、spanNルールは常に@mediaブロック内にあるようです。

したがって、いソリューションは、すべてのspanNルールを別のcssファイルのトップレベルにコピーし、htmlに含めます。

91
raykin

私はこの質問が古いことを知っていますが、この問題stillが発生します。最近のLaravel 5.8およびTwitter Bootstrap 4.0.プロジェクト。.col-md .colを使用して、以下を実行します。

config/snappy.phpに--viewport-size 1024x768引数を追加する場合

     'pdf' => array(
        'enabled' => true,
        'binary' => "C:\wkhtmltopdf\bin\wkhtmltopdf --viewport-size 1024x768",
        'timeout' => false,
        'options' => array(),
        'env' => array(),
    )

次に、ビューで.col-mdまたは.colを問題なく使用します。

注：Bootstrap 4を使用して、HTMLにpublic path。を使用します。

//Laravel
<link rel="stylesheet" href="{{public_path('css/bootstrap4/bootstrap.min.css')}}">
2
Abdelsalam Shahlol