how to load Css in pdf using wicked_pdf

Question

For my rails 4 app i want to convert html and Css into a pdf file. i use the wkhtmltopdf and wicked_pdf gem if i use the wicked helper it doesn't show the css but it render only the text

in my controller i have:

respond_to do |format|
      format.html
      format.pdf do
        render :pdf => "#{@card.name}",
            :template => 'cards/show.html.slim',
            :page_size => "A4",
            :disposition => 'attachment'

And in the show.html.slim

    = link_to "Download PDF", :action => "show", :format => :pdf

aplication.html.erb

<%= wicked_pdf_stylesheet_link_tag "pdf" -%>
<%= wicked_pdf_stylesheet_link_tag    "application", media: "all", "data-turbolinks-track" => true %>
<%= wicked_pdf_javascript_include_tag "application", "data-turbolinks-track" => true %>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

Glomerulus

I've never seen -%> before. Is it meant to be like this, or is it mistyped? – Brumaire

i know, i tried both but -%> is what the documentation says.. github.com/mileszs/wicked_pdf – Glomerulus

It's most apparently mistyped... As for the rest, you don't write "pdf", I think: You should use them to replace the helpers javascript_include_tag or stylesheet_link_tag ( I think, again ) – Brumaire

edit code^* application.html.erb – Glomerulus

Answer 1

<%= wicked_pdf_stylesheet_link_tag "css_file_name" -%>

this is the css file name which you must have in your app/assets/stylesheets/ directory

<%= wicked_pdf_stylesheet_link_tag "css_file_name" -%>
<%= wicked_pdf_stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>
<%= wicked_pdf_javascript_include_tag "application", "data-turbolinks-track" => true %>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

hope this might help you.

Axes

My application.SomeNum.css gets created in public folder. In this scenario, how do I handle? Also the file name is a random num. – Wop

In my example css_file_name is a scss and I use @import "bootstrap.min" for import my bootstrap file present in vendor folder – Luciferase