css - Wicked_PDF 不呈现 bootstrap 4 样式-6ren

css - Wicked_PDF 不呈现 bootstrap 4 样式

转载作者：行者123 更新时间：2023-12-05 04:04:17

28

4

根据我之前的 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

应用/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 中，你需要引用 bootstrap css 文件。

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

将 bootstrap.css 文件添加到您的 Assets /样式表中。

关于css - Wicked_PDF 不呈现 bootstrap 4 样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52827047/

28

4

0

文章推荐： angular - Angularfire/Firebase 实现了哪些 OAuth Flow？

文章推荐： c# - 尝试将视频上传到 YouTube 时获取 "Malformed multipart body"

文章推荐： ruby-on-rails - Action Mailer Rails 的动态默认值

Javascript 呈现(访问者)和 html 呈现(机器人)。合法吗？搜索引擎优化
我有一个 aspx 应用程序。在每个 GET 中，服务器以包含除表格网格之外的所有内容的“基本”html 进行响应。这个“网格信息”包含在页面中隐藏的输入类型(json 格式)中。这是设计使然，无
ios - 呈现/呈现 View Controller 和父/ subview Controller 之间的交互是否在任何地方记录？
阅读有关 iOS 中 UIViewControllers 更改的文档，我试图弄清楚呈现模态视图 Controller 之间的交互如何在自定义容器 View Controller 内工作。最终，我希望能
ajax - 呈现 ClientBehaviorHolder
我正忙于编写自己的 JSF2 UIComponent 及其相关的渲染器。我所有的 UIComponent 都实现了 ClientBehaviorHolder。我不明白的是如何真正呈现 ClientBe
iphone - 呈现 UIPopoverviewcontroller
我正在开发一个使用UIPopoverController的应用程序，我在呈现该弹出窗口时遇到问题，我有一个添加在self.view上的UIView，并在该 View 上添加了一个表格 View ，该表
IOS 呈现 PageViewController
我有一个简单的应用程序，我想在用户首次登录应用程序时在其中显示一个 PageViewController。他们查看教程后，在下一次加载时不会显示 PageViewController。但是我收到了以
模型获取之前的主干.js View 呈现
我正在尝试制作一个小型的backbone.js 应用程序，但在事情的顺序上很挣扎。在我的 html 文件中，标题中有两个脚本 block : jQuery(function(){
atk4 - 呈现 radio 而不是复选框或表单中的选择列表
我有一个以模型为来源的表格: $form->setModel("test"); 在模型中，我们可以定义字段类型，例如:boolean 将在表单中制作复选框。现在我们如何定义呈现为单选按钮的类型？最
fabricJs 自定义对象不会从 JSON 呈现
fabricJS 版本 2.2.3 测试 jsFiddle 我正在尝试使用 LabeledRect 子类，但我的问题是，每当我尝试从 JSON 加载它时，它都不会呈现，并且在控制台中也没有出现错误。请
wpf - 呈现 UserControl.Resources
在我的 Xaml 中，我定义了一个资源作为 vehicleDataInput，它提供一些文本框供用户输入数据。如果我没有为它定义一个 x:Key ，它将在我的应用程序中出现并按其应有的方式工作。问题是
javascript - 呈现 HTML 符号
我在 React 中创建了一个 Symbol 组件来轻松呈现 HTML Symbols像 euro 这样的名字将呈现 €(€) 或 sum 呈现 ∑(∑). 问题是，如果我只渲染 HTML 代码，我将
grails - 呈现 View ，但gsp中没有对象
我尝试渲染一个 View ，该 View 工作正常，但似乎无法获得传递给它的模型对象。我不知道原因，因为根据所有手册和示例，这应该非常简单。模型对象 class Race { def dis
grails - Grails数据库操作和 View 呈现
我正在尝试为Grails项目添加一个简单功能，类似于youtube，它将允许用户喜欢/不喜欢文章。有一个非常原始的页面来显示带有喜欢的文章和一个使“喜欢”成为可能的 Controller 。 las，
iphone - 呈现 MFMailComposeViewController，但它在可见后立即消失
我的应用程序中的第一个 ViewController 子类 UIImagePickerController 然后通过 didFinishPickingMediaWithInfo 回调，我执行以下操作:
javascript - 为什么我的待办事项不使用 Redux 呈现？
我正在做一个简单的 redux/react todo 应用程序。我无法显示待办事项。我能够 console.log 数据，但无法显示它。我做错了什么？我把文件分开了，这是我的app.js: impo
ios - 呈现 navigationController 时出错
我正在尝试呈现一个导航 Controller ，它似乎可以工作并呈现导航 Controller 。但是，即使它有效，我仍然不断收到错误？我的代码 let vc = storyboard.instan
swift - 呈现 Controller 时呈现加载图像的延迟
我正在重新创建一个简单版本的 snapchat 应用程序，但遇到了一个恼人的小问题，我似乎无法找到解决办法。我查看了一些答案，例如 this one但没有运气。总体概念与 snapchat 用户单
swift - 呈现 UIAlert 时延迟较长
我在呈现警报时遇到问题。我正在使用 UIAlertController。当用户按下提交按钮时，在应用程序执行某些操作时，需要立即显示“请稍候..”的警报。操作完成后，警报将消失。尽管应该在我开始执行操
javascript - 图像不使用 KineticJS 呈现
我只是想用 Kinetic 渲染图像，但没有出现，也没有出现错误。可以找到 fiddle here . 源代码: $( function() { var stage = new Kineti
javascript - onLoadFinished 触发时页面未完全加载/呈现
我正在使用 Phantomjs 检查我的应用程序。我正在查看的页面包含很多组件，并且由 Angularjs 提供支持。我的测试服务器很慢。在 onLoadFinished 事件中，我使用渲染对网页进行
javascript - 呈现 XML 文档
我有一个变量，它的字符串包含我所有的文档，如下所示: var string = " ReportHelloWorld"; 我想打开一个正确插入和显示此报告的新页面，但不知道如何操作。我该怎么办？感谢

首页

博学

6Ren·AI

商城

css - Wicked_PDF 不呈现 bootstrap 4 样式