Issue with Wicked_pdf stylesheet rendering on Heroku

I am currently working on a Rails application that utilizes wicked_pdf for generating PDF files. Everything works perfectly fine when testing locally, but once the app is deployed to Heroku, the generated PDF does not apply the stylesheet.

Specifically for PDF rendering, I have a CSS file located at: 

app/assets/stylesheets/pdf.css.scss
. In my form.pdf.haml file, I include the stylesheet in the following way:

  !!!
  %html{lang: "en", "xml:lang" => "en", xmlns: "http://www.w3.org/1999/xhtml"}
    %head
      %meta{content: "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/
      = wicked_pdf_stylesheet_link_tag "pdf"

Despite working without any issues locally, deploying to Heroku results in the following error message:

ActionView::Template::Error (No such file or directory - /app/public/pdf.css)

Is there anything specific that needs to be done in order to rectify this issue on Heroku?

Edit: I came across a helpful Github repository 

https://github.com/jordan-brough/heroku-pdf
, which provides an example application for utilizing wicked_pdf on Heroku. By adjusting the environment.rb to serve a css file from the public folder when requesting a PDF, it greatly assisted in resolving the problem.

cssruby-on-railspdfherokuwicked-pdf

Answer №1

I encountered a similar issue and after some time, I managed to find a solution. I ended up utilizing the wkhtmltopdf-heroku gem along with the following configuration that functions properly both locally and on Heroku while also handling the debug option effectively:

Within the controller:

respond_to do |format|
  format.html
  format.pdf do
    render pdf: @profile.name + Date.today.to_s(:number),
           background: true,
           encoding: 'utf8',
           :show_as_html => params[:debug].present?
  end
end

Inside show.pdf.erb:

<% if params[:debug].present? %>
  <%= stylesheet_link_tag 'documents' %>
<% else %>
  <%= wicked_pdf_stylesheet_link_tag 'documents' %>
<% end %>
... rest of view ...

In config/environments/production.rb:

config.assets.precompile += ['documents.css.scss.erb']

Within config/initializers/assets.rb

Rails.application.config.assets.precompile += %w( documents.css )

Hopefully, this information proves useful to someone in need.

Answer №2

After experimenting with various solutions, I finally stumbled upon this method which resolved my issue with the wicked_pdf. However, there was an insightful comment that caught my attention:

"Activating runtime compilation is not the solution, because of the performance hit we take" @David Tuite

Fortunately, I came across a helpful suggestion in this comment recommending the use of the non-stupid-digest-assets gem, which worked flawlessly for me.

Answer №3

If you're looking to use wkhtmltopdf binaries on Heroku without the hassle of installing any binaries in your own repository, there's a convenient GEM available for that. It even includes the OSX (darwin) binary for development purposes. This solution has been tested with PDFKit and should work seamlessly with WickedPDF as well.

Check out the GEM here: https://github.com/bradphelan/wkhtmltopdf-heroku

  You can also quickly add it to your Gemfile like this:
    gem "wkhtmltopdf-heroku"

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The CSS3 selector matching a value starting with "[attribute^=value]" does not match a value that has spaces after the quotation marks

When using the div[class^="test"] selector, keep in mind that it will not select an element with a class attribute like class=" test-something" (This selector was generated on the backend.) Using the div[class^=" test"] is not a valid choice. ...

csscss-selectors

Conceal HTML elements from the bottom as new content is being added dynamically

I am currently working on a comments feed feature. By default, only the first four comments are displayed, with an option to show more when clicking the "show more" anchor. The issue I'm facing is that if new comments are dynamically added, the CSS hi ...

javascriptjqueryhtmlcss

What is the best way to transfer data from processing.js to a rails application?

I am working on a basic canvas project using processing.js, and I am wondering how I can transfer data from my Rails application to Processing.js. void drawBox(int bx, int by, int bs, int bs){ strokeWeight(3); stroke(50,50,50); // Test ...

javascriptruby-on-railsajaxprocessing

What could be the reason behind the improper display of JavaScript for ID overlay2?

Why is it that when I try to have two overlays with different messages display upon clicking buttons, they both end up showing the same message? Even after changing the ID tag names, the issue persists. Can someone shed some light on what might be causin ...

javascriptjqueryhtmlcss

What is the best way to add a checkbox tag in Rails using JavaScript?

I am attempting to use javascript to append the values from option fields to checkboxes in Rails. Here is a snippet of my javascript code: $("#regions option").each(function(){ $("#region-checkboxes").append('<li><%= check_box_tag "region ...

javascriptjqueryhtmlruby-on-railsruby

JavaScript: Replace image title on mouse over

I am having trouble adding '_hover.jpg' to my images on mouse over. Can anyone provide assistance with this issue? Thank you in advance. <script type="text/javascript> $(document).ready(function () { $(".img").mouseover(function (e) { ...

javascriptjquerycss

Troubles with Bootstrap's navbar dropdown menu functionality

I seem to be encountering a problem with the dropdown list in my navigation bar. It was functioning correctly yesterday, but something seems to have gone awry as Bootstrap is no longer working for the dropdowns only. I'm puzzled as to why this sudden ...

htmlcss

CSS. Absolute positioning in relation to a div element

I discovered a way to adjust the positioning of a div using jQuery. Check out this example. Is it possible to achieve the same result using CSS? UPDATE: I came across this solution. I also want the horizontal window scrollbar to appear if the fixed elem ...

htmlcss

What is the method for customizing the color of a placeholder text in a specific text field

Is there a way to style placeholder text in different colors for each text field? According to the Mozilla documentation, the code snippet provided will change the color of the entire input tag. If you'd like to learn more, follow this link: https:/ ...

javascriptjquerycsshtmlfirefox

Tips for expanding the cell output width in Google Colab

After searching for a solution, I came across a similar question on Stack Overflow. However, the suggested fix didn't work on Google Colab. The issue is with the width of the text in my pandas dataframe columns, which currently defaults to 50%. from I ...

pythonhtmlcsspandasgoogle-colaboratory

Is there a discrepancy in height between Chrome's mobile emulator and the iPhone simulator?

Currently, I am conducting a layout test for a PhoneGap application using the Framework7 framework across the Chrome mobile emulator (iPhone 6) and Xcode iOS simulator. However, I am facing difficulties with aligning the vertical layout on both simulators. ...

cssiphonecordovagoogle-chromehtml-framework-7

Is it possible to alter the CSS of an HTML page dynamically from within an iFrame on a separate webpage?

I have a website that uses jQuery UI themes. On this site, there is an iFrame containing another HTML document also utilizing jQuery UI themes. I have created my own theme selector and now want to know the simplest way to apply this selection to the conten ...

jquerycssinheritanceiframestylesheet

Ways to identify and differentiate various checkboxes using HTML and CSS

I am currently working on implementing a thumbs-up and thumbs-down feature, where clicking on the thumb-up icon will change the color to green, and clicking on the thumb-down icon will change it to red. However, I am facing some difficulties understanding ...

htmlcsscheckboxrating-system

Manipulate the contents of children divs within a parent div using JavaScript or JQuery

<div id="abc"> <div id="a_b"> abcd </div> <div id="c_d"> xyz </div> </div> I have a challenge where the divs on my page are generated dynamically and their IDs change every time the page loads. When the window i ...

javascriptjqueryhtmlcss

Embedding a CSS class within the primary class selector

Can someone help me with this HTML challenge? <div class="span3"> <div class="abc">code for first div</div> <div class="abc">code for second div</div> </div> I'm trying to hide the first "abc" division within th ...

htmlcss

Steps for placing a figcaption above an image

Does anyone know how to position a figcaption at the bottom of an img so that it appears on top of the image with a transparent background? I've been having trouble making them the same width and getting the figcaption to sit on top of the image. Whe ...

htmlcssimage

Minimize the gap between two rows in an HTML table

I am working with a table that has multiple rows, specifically five. My goal is to decrease the space between the third and fourth rows. Here is the code snippet: <table> <tr> <td>First Row</td> <td>1< ...

htmlcsshtml-table

The collapse feature of the navbar-toggle is not showing up

My navbar is experiencing issues with the navbar-toggle collapse class. When I reduce the size of the page, the button meant to appear does not show up, even though other collapsing elements are working properly. <nav class="navbar navbar-inverse navba ...

javascriptjqueryhtmlcsstwitter-bootstrap

Issues with div misalignment during jQuery animation

I have successfully created an animation where a child div inside a parent div moves up by -60px when the mouse enters the parent div, and returns to its original position when the mouse leaves. However, I am facing an issue where if the mouse moves direct ...

jqueryhtmlcss

Leverage jQuery for dynamically changing CSS transform properties

Is it possible to update CSS transform values using jQuery with a click event? If not, does anyone have any suggestions on how I could achieve the same effect? I attempted the following code but it did not work for me... $('.reset').on('c ...

javascriptjquerycsstransform