Converting Twitter bootstrap page into PDF with wkhtmltopdf : span issue

Asked 31/10, 2013 at 11:56 Answered 24/11, 2022 at 16:17

Solved html css twitter-bootstrap pdf-generation wkhtmltopdf

I am using Symfony2 Bundle KnpSnappyBundle to convert an html twig template to a pdf.

KnpSnappyBundle is base on Snappy wrapper, that use wkhtmltopdf.

My template use twitter bootstrap 2.3.2 css like this :

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

Problem : the customers and estimate spans are not on the same line as they should be. I don't know what is going on.

Tratner answered 31/10, 2013 at 11:56 Comment(0)

102

Here is solution for Bootstrap3: Use .col-xs-n always.

The reason is wkhtmltopdf didnt support css in @media block. In bootstrap3, only col-xs-n rule outside @media block.

I've checked the bootstrap2.3.2 css, seems spanN rules always be inside @media block.

So an ugly solution would be copied out all spanN rules into top level to another css file and included it into html.

Swiss answered 16/1, 2014 at 3:38 Comment(6)

I found this question as I am facing an issue where my bootstrap page is in 3 columns (3-6-3) and when I run it through wkhtml2pdf, its rendering it all as 12 cols. Can you elaborate on this copying out the rules scenario ? I'm using 2.3.2 – Deceitful 4/5, 2015 at 17:37

Did not work for me so i searched further. flex css property was ignored. So i wrote an additional .col-md-3 class with added float and width, than it worked. Found issue here – Galingale 24/8, 2017 at 6:11

Add viewport-size: '1024x768' to the wkhtml2pdf options and you can use the col-md-* classes. – Affliction 2/3, 2018 at 21:4

It works with bootstrap 4, you simply need to use .col-n instead of .col-xs-n – Lordinwaiting 6/11, 2018 at 14:28

Since Bootstrap 4.1 this no longer works, see explanation here: github.com/twbs/bootstrap/issues/27642#issuecomment-450479741 – Dowery 10/8, 2019 at 5:43

@Affliction thanks! it works when you add this option while generating the PDF file and not into the config file. $pdf->setOption('viewport-size', '1024x768'); – Mllly 16/6, 2022 at 14:47

I know that this question is old but this problem still occurs. In a recent Laravel 5.8 and Twitter Bootstrap 4.0.0 project. I managed to use .col-md .col and getting perfect results by doing the following:

In adding --viewport-size 1024x768 argument on config/snappy.php

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

Then on your view use .col-md or .col without any problems.

Note, include Bootstrap 4 to your HTML using public path.

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

Pasahow answered 24/7, 2019 at 22:7 Comment(0)

From fabpico comment for raykin answer found the most appropriate way to go reading through the whole discussion. I've tried to shrink the css stuff as much as possible without any consequences for my documents. Just added some css for row class without any altering the html document:

<head>
    <style>
        .row {
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
        }
        .row > div {
            -webkit-box-flex: 1;
            -webkit-flex: 1;
        }
    </style>
</head>

<div class="container">
<div class="row">
    <div class="span12">
        <h4>TITLE</h4>
    </div>
</div>
<div class="row">
    ...
</div>
</div>

Hope it is going to save someone's time :)

Oakum answered 24/11, 2022 at 16:17 Comment(1)

This also worked for me (Bootstrap v5.0.2) thank you!!! :) – Donohue 4/4, 2023 at 15:10

-45

If you are just trying to create a PDF of hosted web page you can do so for free using Internet Explorer.

I've had to do this for some clients that require viewing their web page and emails layouts in a PDF format for approvals.

Open the web page in Internet Explorer.
Hit F12 on your keyboard and it will open the inspection tools.
Choose the icon for 'Emulation' it's a little computer/phone icon. This allows you to select which version of IE you want to emulate your page in. I choose IE8 to get responsive pages and emails to render like they would on a full desktop view.
Then in the top right hand corner of your browser should be an icon (earth with a little PDF doc next to it), click that dropdown menu and select 'Convert Webpage to PDF'

This should automatically create a PDF of your web page as accurately as possible even with responsive CSS.

Sublunary answered 10/1, 2014 at 18:39 Comment(1)

I'm trying to generate pdf on the server side. And if i tried to do what you are saying, i wouldn't use internet explorer ;) – Tratner 16/1, 2014 at 7:50

Recommended topics

Hot tags