search

marcbachmann / node-html-pdf

This repo isn't maintained anymore as phantomjs got dreprecated a long time ago. Please migrate to headless chrome/puppeteer.
MIT License
3.56k stars 541 forks source link

Bootstrap with Grid System is not working with node-html-pdf. #283

Open sanjuleadcap opened 7 years ago

sanjuleadcap commented 7 years ago

The bootstrap is working fine but the grid system isn't. I have checked the HTML file on the browser, it shows fine, but the generated pdf is not showing the divs in columns.

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://bootswatch.com/sandstone/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-6 col-md-4">.col-6 .col-md-4</div>
            <div class="col-6 col-md-4">.col-6 .col-md-4</div>
            <div class="col-6 col-md-4">.col-6 .col-md-4</div>
        </div>
    </div>
</body>
</html>
JakenHerman commented 7 years ago

Having similar behavior. Any word on a fix/workaround?

JakenHerman commented 7 years ago

@sanjumathew use .col-xs-n instead of .col-md or others. This fixed it for me.

Sunil6591 commented 7 years ago

Upgrading the boostrap fixes the issue - https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css

jiggy1com commented 7 years ago

Similar issue... using Bootstrap 4 if I have 2 columns each using col-xs-6 then the columns stack, but when I switch to using col-6 the columns are side by side.

This is fine for 2 simple columns, but doesn't really give me the ability to showcase the responsiveness at various breakpoints.

Looks like the PDF generates the XS version of the page :-\ ... can't figure out how to tell PhantomJS I want the HTML rendered at 1200px (or whatever). (To be fair, I've never used PhantonJS & I've only been looking at this for about an hour. Looking into seeing if I can set it using arguments).

Setting the options like this (see below) doesn't give me the proper CSS breakpoints.

var options = {
  width: '900px', // 100% didn't work either
  height : '2000px',
  zoomFactor : .5 // tested with and without
};
pekpon commented 6 years ago

You can fixit replacing every col-md-6 to col-xs-6. That's it!

Thanks to Alex Johnson -> https://stackoverflow.com/questions/34182550/phantomjs-external-css-is-ignored-in-rendered-pdf

rekDen commented 6 years ago

.col-xs-n didn't work out for me. The hint "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" from @Sunil6591 helped me out. Downgrading bootstrap to 3.3.7 display my rows and columns at least correctly in the pdf-file.

Best regards and an awesome time for you guys Denis

farmbotgianpaolo commented 6 years ago

.col-xs-n didn't work out for me.

Bootstrap 4 uses .col-n instead of .col-xs-n

himangshushekharjha commented 4 years ago

To solve the problem, downgrade Bootstrap-4 to Bootstrap-3 and use .col-xs-n ( n = 4,6,12,etc ) . So, doing this will provide proper functionality while using grid system. But another problem that might be there is "no-color problem", i.e. even after specifying the colors and various styles, the pdf wont respond to those styles. In order to tackle the above mentioned problem, save bootstrap.css or bootstrap.min.css locally and remove all the @ media print classes. These classes have rules that prevent you to display styles. Now use the edited bootstrap.