Wicked_PDF 不渲染 bootstrap 4 种样式

Question

根据我之前的 wicked_pdf 问题，现在我正在呈现正确的模板，但我无法获取 pdf 来呈现应用程序的 bootstrap 样式。

我正在使用 bootstrap 4，ruby '2.4.2' 和 gem 'rails'，'~> 5.2.1'

app/controllers/proposals_controller.rb

def show
    @proposal = Proposal.find(params[:id])
    @custom_content = @proposal.custom_contents
    respond_to do |format|
      format.html
      format.pdf do
        render pdf: "some_name",
               template: "proposals/show.pdf.erb",
               layout: "pdf.html",
               margin: { top: 35, bottom: 35 }
      end
    end
  end

app/views/layouts/pdf.html.erb

<!DOCTYPE html>
<html>
<head>
  <title>PDF</title>
  <%= wicked_pdf_stylesheet_link_tag "application" -%>
</head>
<body>
<div class='container d-flex justify-content-center'>
  test 2
  <%= yield %>
</div>
</body>
</html>
app/views/proposals/show.pdf.erb

<div class="row full-page justify-content-center" id="cover">
  <div class="container">
    <div class="row p-0">
      <div class="col-12 d-flex align-items-end ">
        <%= wicked_pdf_image_tag '1209232_1920-1.jpg' %>
      </div>
    </div>
    <div class="row pt-1 d-flex align-items-end text-justify">
      <div class="col-12 text-justify cover-background">
        <div class="row pt-1">
          <h2 class="text-white text-justify">Proposal For <br> Maintenance</h2>
        </div>
        <div class="row p-0">
          <div class="col-6">
            <h5 class="text-white text-justify">Prepared For: <%= @proposal.contact.name %></h5>
            <h6></h6>
          </div>
          <div class="col-6">
            <h5 class="text-white text-justify">Prepared By: <%= @proposal.user.name %></h5>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

app/assets/stylesheets/application.scss

// $navbar-default-bg: #312312;
// $light-orange: #ff8c00;
// $navbar-default-color: $light-orange;
$brand-color: #30AADD;

@import "font-awesome-sprockets";
@import "font-awesome";
@import "bootstrap";
@import "sticky-footer";
@import "announcements";
@import "summernote-bs4";
@import "summernote-custom-theme.min";
@import "material_icons";


// Proposal Cover
.full-page {
  min-height: 100vh;
}
.cover-image{
  background-image: url('https://heliportstudios.com/wp-content/uploads/2016/09/new-york-1209232_1920-1.jpg');
  max-width: 100%;
  max-height: 100vh;
}

.cover-background {
  background: $brand-color;
}

plus alot of custom styling

我已经查看了很多这样的案例，但似乎没有任何效果

Answer 1

在您的 pdf.html.erb 头中，您需要引用 bootstrap css 文件。

<head>
  <title>PDF</title>
  <%= wicked_pdf_stylesheet_link_tag "application" -%>
  <%= wicked_pdf_stylesheet_link_tag "bootstrap" %>
</head>

将 bootstrap.css 文件添加到您的 assets/stylesheets。

Wicked_PDF 不渲染 bootstrap 4 种样式

Wicked_PDF not rendering bootstrap 4 styles

css

ruby-on-rails

wicked-pdf

ruby-on-rails-5

bootstrap-4