PhantomJS: external CSS is ignored in rendered pdf

If some of Bootstrap's styles are being applied, but not others, you can assume that it's a conflict with the Bootstrap CSS library and printing. Certain classes, especially the grid classes such as col-md- don't always properly scale or render on a printed page. If you're having trouble getting the correct grid layout to print, you could try fixing these classes. For example:

• Replace every col-md-6 to col-xs-6.

Thanks to user Sonam for pointing this out.

I'd also recommend taking a look at the rest of this thread on how to create printable Twitter Bootstrap page.

However, if NO bootstrap styles are being applied, the source of the problem is likely somewhere between loading the page's content, and converting that page into a .pdf document. In my experience, it's always a little tricky to debug PDF rendering libraries, since it's hard to see where in the flow your process is going wrong. There are a few things you could try:

You might be calling .render() before the page has loaded the external resources (aka bootstrap). Take a look at this similar question about rendering PDFs in Phantom. The solution might be to add a timeout/delay to ensure the page's external CSS has been loaded.

• page.set('content') dosen't work with dynamic content in phantomjs

I should add - there are a few other reason's that might cause the Phantom.js rendered page to fail to load in external resources. Make sure you've got Phantom.js set up correctly, especially the localToRemoteUrlAccessEnabled key. See the below StackOverflow question for reference:

• Phantom-node module unable to load external resources