Conversion de la page Twitter bootstrap en PDF avec wkhtmltopdf: question de portée

j'utilise Symfony2 Bundle KnpSnappyBundle pour convertir un modèle de brindille html en pdf.

KnpSnappyBundle est basé sur Prompt wrapper, qui utilisent wkhtmltopdf.

mon modèle utilise bootstrap twitter 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 portées des clients et des devis ne sont pas sur la même ligne qu'elles devraient l'être. Je ne sais pas ce qui se passe sur.

23
demandé sur user1254498 2013-10-31 15:56:05

2 réponses

Voici la solution pour Bootstrap3: utiliser .col-xs-N toujours.

la raison est que wkhtmltopdf n'a pas soutenu css dans @media block. Dans bootstrap3, seule la règle col-xs-n est en dehors du bloc @media.

j'ai vérifié le bootstrap2.3.2 css, semble règles spanN toujours être à l'intérieur @Media block.

ainsi une solution moche serait copiée toutes les règles spanN dans le niveau supérieur à un autre fichier css et l'inclus dans html.

85
répondu raykin 2014-01-16 03:38:54

si vous essayez juste de créer un PDF de page Web hébergée, vous pouvez le faire gratuitement en utilisant Internet Explorer.

j'ai dû le faire pour certains clients qui ont besoin de visionner leur page web et les mises en page des courriels dans un format PDF pour les approbations.

  1. ouvrez la page Web dans Internet Explorer.
  2. Tapez F12 de votre clavier pour ouvrir les outils d'inspection.
  3. Choisissez l'icône 'Émulation" c'est un peu ordinateur/téléphone icône. Cela vous permet de sélectionner la version de IE que vous voulez émuler votre page. J' choisir IE8 pour obtenir des pages et des e-mails rendre comme ils le feraient sur un affichage plein écran.
  4. puis dans le coin supérieur droit de votre navigateur doit être une icône (terre avec un peu PDF doc à côté de lui), cliquez sur ce menu déroulant et sélectionnez "Convertir la Page web au format PDF'

cela devrait automatiquement créer un PDF de votre page web aussi précisément que possible, même avec des CSS réactifs.

-27
répondu Terri Swiatek 2014-01-10 18:39:34