I am stuck on the gem wicked_pdf.

I am generating a pdf report and I want to include stylesheets.
Stylesheets are generated through webpack with tailwindcss.

In wicked_pdf doc, it is said that I can use wicked_pdf_stylesheet_pack_tag and wicked_pdf_javascript_pack_tag to include my stylesheets and javascript from webpack but nothing works.

Here is the code from the controller:

      format.pdf do
        render template: "pdf_reports/show", 
        layout: "wicked_layout",
        pdf: "report"
      end

Here is the code from the layout:

<!DOCTYPE html>
    <html>
        <head>
           <%= csrf_meta_tags %>
           <%= wicked_pdf_javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
           <%= wicked_pdf_stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
           <%= wicked_pdf_stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
      </head>
      <body>
        <%= yield %>
      </body>
</html>

Here is the code from the view pdf.erb:

<h1 class="text-red-base">Test pdf</h1>
<h2 class="test-wicked">mldgmdjgfd</h2>

It works with wicked_pdf_stylesheet_link_tag (test-wicked is applied from sprockets: text is blue) but not with wicked_pdf_stylesheet_pack_tag (h1 should be red but is not).

Any idea what's going on?

Thank you!

Analysis

The webpack helpers make several assumptions that might not hold in every project.

They produce two different results depending on what running_in_develpment? returns. With webpacker 3.0.0 or newer this method delegates to Webpacker.dev_server.running?.

Without the dev server running the helpers will assume the assets were precompiled and will attempt to paste the contents of the asset into a <style> or <script> tag. This should work if assets are precompiled in production and are available in the filesystem of the environment where the application is running. This is most often true.

With the dev server running the webpack helpers will return a tag with an asset path to the pack asset (eventually using standard asset_path helper). The actual path depends on the rails config. In some cases the path will be incompatible with the html being rendered by wkhtmltopdf from a file://...:

if config.action_controller.asset_host isn't set the asset_path will produce relative paths. These will not work in wkhtmltopdf rendering from file.
if config.action_controller.asset_host is set absolute URLs will be used through out the application (this is a general setting that controls what asset_path returns). Now wkhtmltopdf might be able to fetch the assets, if it is running in the environment where the asset host can be resolved and accessed. This might not be true in a containerized application.

Additional constraints

In our case we had some additional constraints:

our PDF emitting actions support a param that makes them pass show_as_html: true to render. This makes wicked_pdf skip PDF generation and return the intermediate HTML. We use this to debug HTML views in the browser. This html will be rendered by the developer's browser in a different environment than where wkhtmltopdf runs.
our development setup is single threaded because we use better_errors debugger which relies on all requests being served by the same application instance. On the other hand we render PDF in the request. This means the wkhtmltopdf won't be able to request the assets from the application (e.f. by passing host: "localhost:3000" to the asset_path) because it already occupies the only available thread.

Sample solution

Our solution has been to implement our own helpers that are more aware of our set up.

In production the default behavior is compatible with our setup, so we delegate to the original, which will find the assets in the filesystem and include them in the generated HTML.
In development, when generating the PDF, we pass the hostname/port of the webpack dev server to webpacker tag helpers (which will pass them down to asset_path). Dev server runs in a separate process and hence will repond even while the application is inside the request handler.
In development, when returning intermediate HTML (as determined by our custom helper show_as_html?), don't pass host: to asset_pack_url, which will result in "normal" asset path like in the rest of the application, which will work in the browser.

module PdfHelper
  def pdf_stylesheet_pack_tag(source)
    if running_in_development?
      options = { media: "all" }
      wds = Webpacker.dev_server
      options[:host] = "#{wds.host}:#{wds.port}" unless show_as_html?
      stylesheet_pack_tag(source, options)
    else
      wicked_pdf_stylesheet_pack_tag(source)
    end
  end

  def pdf_javascript_pack_tag(source)
    if running_in_development?
      options = {}
      wds = Webpacker.dev_server
      options[:host] = "#{wds.host}:#{wds.port}" unless show_as_html?
      javascript_pack_tag(source, options)
    else
      wicked_pdf_javascript_pack_tag(source)
    end
  end
end

In the pdf layout (slim)

html
  head
    ...
    = pdf_stylesheet_pack_tag "pdf"
    = pdf_javascript_pack_tag "pdf"
    ...

Analysis

Additional constraints

Sample solution

Recommended topics

Hot tags