Pdf content not displaying

Question

I am trying to debug an issue where some HTML content is not rendering in the pdf. Earlier it used to work fine but now I don't empty spaces. Initially, I suspected there was some backend or rails issue but that was the wrong assumption. Then I thought it was a bootstrap issue but I was wrong because when I use the same HTML and render in the browser it works perfectly fine.

Below HTML is not showing in the PDF file. I can only see the Horizontal line which gets render due to <hr/> tag

<div class="row top-padded">
          <div class="col-md-10">
            <p class="block bold"><%= (status == "abstain") ? "Abstained By" : "#{status.capitalize} By:" %></p>
            <hr />
            <% requesters.merge(User.answered).where(approved_status: status).each do |user_obj| %>
              <% user = user_obj&.user&.decorate %>
              <%= image_tag user_obj.signature, style: "width: 200px; height: auto;" unless user_obj.signature.blank? %>
              <p>
                <%= user&.first_last || "Removed User" %>
                on
                <%= user_obj.decorate.response_date %>
                <%= user&.time_zone if user %>
              </p>
            <% end %>
          </div>
        </div>

So my final suspect is two things

I am using wkhtmltopdf to convert HTML to pdf. So, I suspect that this is creating an issue
Few months back we updated from bootstrap 4 to bootstrap 5 so maybe the CSS is not compatible with pdf.

I would need some suggestions or help on how can I resolve this issue

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta charset="UTF-8">
    <%= wicked_pdf_stylesheet_link_tag "optional/pdf_fonts" %>
    <%= wicked_pdf_stylesheet_link_tag "application" %>
  </head>
  <body>
    <div class="col-lg-12">
      <h1><%= question %></h1>
      <div class="approval_metadata top-padded">
        <p>
          <%#=  this is for rendering pdf%>
          <%= content_tag(:span, highlight("Title: #{user&.name}", 'title', highlighter: '<strong>\1</strong>'), class: "block") %>
          <%= content_tag(:span, highlight("Filename: #{user&.filename}", 'filename', highlighter: '<strong>\1</strong>'), class: "block") %>
          <%= content_tag(:span, highlight("File created: #{user&.created_at&.strftime('%d-%^b-%Y %I:%M:%S %p')}", 'file created', highlighter: '<strong>\1</strong>'), class: "block") %>
          <%= content_tag(:span, highlight("File Last Modified: #{user&.updated_at&.strftime('%d-%^b-%Y %I:%M:%S %p')}", 'file last modified', highlighter: '<strong>\1</strong>'), class: "block") %>
          <%= content_tag(:span, highlight("Location: Resource Library / #{user.pluck(:name)&.join(" / ")}", 'location', highlighter: '<strong>\1</strong>'), class: "block") %>
          <%= content_tag(:span, highlight("Approval Requested: #{approval&.created_at&.strftime('%d-%^b-%Y %I:%M:%S %p')}", 'approval requested', highlighter: '<strong>\1</strong>'), class: "block") %>
          <%= content_tag(:br) %>
        </p>
      </div>
      <% User.statuses.each do |status, index| %>
        <div class="row top-padded">
          <div class="col-md-10">
            <p class="block bold"><%= (status == "abstain") ? "Abstained By" : "#{status.capitalize} By:" %></p>
            <hr />
            <% requesters.merge(User.answered).where(approved_status: status).each do |user_obj| %>
              <% user = user_obj&.user&.decorate %>
              <%= image_tag user_obj.signature, style: "width: 200px; height: auto;" unless user_obj.signature.blank? %>
              <p>
                <%= user&.first_last || "Removed User" %>
                on
                <%= user_obj.decorate.response_date %>
                <%= user&.time_zone if user %>
              </p>
            <% end %>
          </div>
        </div>
      <% end %>
    </div>
  </body>
</html>

When you render in the browser, it is not the same as using Wkhtmltopdf. If you version of Bootstrap is using Flex, then it won't render properly (Though Bootstrap was already using Flex Boxes from the v 4, so it is a bit strange the break appeared on v 5) If you want a PDF tool that renders any kind of CSS, then you need to switch to Grover / Puppeteer in order to render the same way as in the browser. — Maxence, Dec 04 '22 at 16:34
I don't want to use a different tool as wkhtmltopdf is used heavily in the project. But thanks for the suggestion — Aniket Tiwari, Dec 04 '22 at 16:38
then you need to get rid of CSS Flex items. Try to create a simpler template for your PDFs. — Maxence, Dec 04 '22 at 16:40

score 0 · Accepted Answer · answered Dec 05 '22 at 14:01

0

The issue has been resolved by changing col-md to col-lg. Reference Bootstrap v5 Grid is not working in "col-lg" case

answered Dec 05 '22 at 14:01

Aniket Tiwari

3,561
4
21
61

Pdf content not displaying

1 Answers1