Question

在我之前的wicked_pdf问题之后，由于我正在渲染正确的模板，因此我无法获取pdf来呈现应用程序的引导样式。

我正在使用引导程序4，红宝石“ 2.4.2”和宝石“ 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文件添加到资产/样式表。

Wicked_PDF不呈现bootstrap 4样式

1 个答案: