以前のwicked_pdfの質問に続いて、正しいテンプレートをレンダリングしているので、アプリケーションのブートストラップスタイルをレンダリングするためのpdfを取得できません。
私はブートストラップ4、ルビー「2.4.2」とジェム「レール」、「〜> 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
私はこれの多くのケースを調べましたが、何もうまくいかないようです
の頭の中でpdf.html.erb、ブートストラップcssファイルを参照する必要があります。
<head>
<title>PDF</title>
<%= wicked_pdf_stylesheet_link_tag "application" -%>
<%= wicked_pdf_stylesheet_link_tag "bootstrap" %>
</head>
bootstrap.cssファイルをアセット/スタイルシートに追加します。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加