web-dev-qa-db-fra.com

Conversion de Twitter bootstrap page en PDF avec wkhtmltopdf: problème de durée

J'utilise Symfony2 Bundle KnpSnappyBundle pour convertir un modèle html twig template en pdf).

KnpSnappyBundle est basé sur Snappy wrapper, qui utilise wkhtmltopdf .

Mon modèle utilise Twitter bootstrap 2.3.2 css comme ceci:

<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>

Problème: les clients et les durées estimées ne sont pas sur la même ligne qu'ils devraient l'être. Je ne sais pas ce qui se passe.

htmlcsstwitter-bootstrappdf-generationwkhtmltopdf
28
user1254498

Voici la solution pour Bootstrap3: utilisez toujours .col-xs-n.

La raison en est que wkhtmltopdf ne supportait pas CSS dans le bloc @media. Dans bootstrap3, seule la règle col-xs-n en dehors du bloc @media.

J'ai vérifié le bootstrap2.3.2 css, il semble que les règles spanN soient toujours dans le bloc @media.

Ainsi, une solution laide serait copiée sur toutes les règles spanN dans le niveau supérieur vers un autre fichier CSS et incluse dans HTML.

91
raykin

Je sais que cette question est ancienne mais ce problème toujours se produit. Dans un récent projet Laravel 5.8 et Twitter Bootstrap 4.0.. J'ai réussi à utiliser .col-md .col et obtenir des résultats parfaits en procédant comme suit:

En ajoutant --viewport-size 1024x768 argument sur config/snappy.php

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

Ensuite, sur votre vue, utilisez .col-md ou .col sans aucun problème.

Remarque, incluez Bootstrap 4 à votre code HTML en utilisant chemin public.

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