文章/答案/技术大牛

发布

社区首页 >问答首页 >Wicked_PDF不呈现引导4样式

问Wicked_PDF不呈现引导4样式
EN

Stack Overflow用户

提问于 2018-10-16 02:20:59

回答 1查看 2K关注 0票数 3

按照我以前的wicked_pdf问题，现在我正在呈现正确的模板，我无法获得pdf来呈现应用程序的引导样式。

我使用的是引导程序4，ruby '2.4.2‘和宝石'rails'，'~> 5.2.1’

app/控制器/建议控制器.app

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/视图/布局/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/样式表/application.scss.assets

// $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

我看过许多这方面的案例，但似乎没有任何效果。

css

ruby-on-rails

bootstrap-4

ruby-on-rails-5

wicked-pdf

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-10-16 05:12:45

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

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

将bootstrap.css文件添加到资产/样式表中。

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/52827047

复制

相似问题

问Wicked_PDF不呈现引导4样式
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Wicked_PDF不呈现引导4样式EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Wicked_PDF不呈现引导4样式
EN