Wicked_Pdf Stylesheet Not Working on Heroku

WickedPDF loose style on Heroku

So the main style problem came from Bootstrap.

The Bootstrap CDN link didn't made the job, so I ended up with downloading the bootstap css.
Basically I unchecked all and only kept what needed like the common css.

I minified the bootstrap css, pasted it in a new file bootstrap.min.css and placed it under vendor/assets/stylesheets/with pdf.scss

Then I've imported the boostrap file in my pdf.scss, like so:

@import "bootstrap.min";

Wicked_PDF not rendering HTML and CSS assets hosted via Asset Sync in production

I had the same problems when deploying to production in Heroku.

Two possible areas to address... First off, EVERY Javascript or CSS resource file must be specified as an absolute URL, not just the one that you are specifying in the template code. If you have any JS/CSS files referenced elsewhere, these would also have to be specified in absolute form. Because of this, you'll need to look at your pdf layout file as well

Secondly (and this is what did the trick for me on Heroku), I wound up having to specify each of my resources in config/application.rb like so:

config.assets.precompile += ['blueprint/screen.css', 'jquery.timepicker.css', 'pdf.css', 'jquery.ui.datepicker.js', 'pdf.js', 'jquery.autosize.js', 'jquery.timepicker.js']

I'm not sure why this second step was required but without it, nothing working on Heroku: I got the same blank PDF with no errors that you are reporting, even thought everything worked in development. My experience has been that wkhtmltopdf silently fails if there are resource issues. I blogged about the problem here and also pushed an update to the WickedPDF README documentation which might be helpful.

Related Topics