wicked pdf styles not showing up

supriyas12 commented 6 years ago

I am unable to get the wicked pdf styles working. I have tried several options as seen over the web, with no luck. Here is the code I have - Controller -

format.pdf do
     html = render_to_string(template: 'orders/showPDF.html.erb', layout: 'order_pdf')
     document_data = WickedPdf.new.pdf_from_string(html)
     send_data(document_data, filename: 'filename', type:  application/pdf')
 end

layout - order_pdf.pdf.erb

<!DOCTYPE html>
    <html>
        <head>
           <%= csrf_meta_tags %>
           <%= wicked_pdf_stylesheet_link_tag("application"), media: "all" %>
           <%= wicked_pdf_stylesheet_link_tag("app/orders/showPDF"), media: "all"  %>
           <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
           <%= wicked_pdf_javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
           <%= javascript_pack_tag 'application' -%>
      </head>
      <body>
        <div class="orderContent">
            <%= yield %>
        </div>
      </body>
</html>

ShowPDF.scss has all the styles that I want to include. If I set the extension of the layout as 'order_pdf.html.erb', I see the error 'undefined mixin grid-container'. So, I renamed it to 'order_pdf.pdf.erb', but don't see any styles applied. Any help will be appreciated.

unixmonkey commented 6 years ago

If you inspect the html variable, does it have the layout applied? What do the stylesheet tags look like? Do they have file:// reference paths?

Are the files you are including in the asset precompile list as shown in the README? This step probably only is necessary once you go to prod, but good not to forget.

It probably doesn't make a huge difference, but you can also use render_to_string to cut a step out:

format.pdf do
  pdf = render_to_string(pdf: 'mypdf', template: 'orders/showPDF.html.erb', layout: 'order_pdf')
  send_data(pdf, filename: 'filename', type: 'application/pdf')
end

or just render (the most common way):

format.pdf do
  render pdf: 'filename', template: 'orders/showPDF.html.erb', layout: 'order_pdf'
end

There's still some work being done to support Webpacker assets, if that's where the issue is coming from (I can't tell here though), maybe look through that code and copy it to application_helper.rb and see if it works for you, and report back?

Let me know how it goes!

supriyas12 commented 6 years ago

When I changed the extension of the layout file to 'order_pdf.html.erb', I did see that some styles started applying. However, I do see the error 'Undefined mixin grid container' with ShowPDF.scss file. So, I had to remove that reference. Also, the output generated on the pdf document is not the same as what I see on the browser, although the html and scss are the same. I see the grids are not aligned as expected in the generated pdf (the components appear one below another where as in the browser they are next to each other). Could this be because it is an .scss file? Not sure what I am missing.

unixmonkey commented 6 years ago

I think removing the reference to "grid container" is causing your grid to not render, however I've seen reports of CSS grid not working at all with wkhtmltopdf, so fixing that may not help. Flexbox is also not working reliably.

wkhtmltopdf uses a similar rendering engine as a Chrome 13 (I'm using Chrome 67 right now), so it doesn't support all the new hotness that modern browsers do right now. You may need to write some extra CSS for the PDF version of your documents to get them to render as expected.

cesc1989 commented 4 years ago

Know this is old but link here for reference.

The WKHTMLTOPDF project depends on Qt/Webkit. Modern features such as flexbox, grid, and css variables aren't supported.

Feriksson commented 1 year ago

End a 3 days research discovering the cause why i couldnt print my pdfs on the way it's was showing on the browser, pls notify this big problem on the page of the library , in my case was using flex and --variables. thanks

mileszs / wicked_pdf

wicked pdf styles not showing up #750