Heroku 上的 WickedPDF 松散样式答案

【问题标题】：WickedPDF loose style on HerokuHeroku 上的 WickedPDF 松散样式
【发布时间】：2019-04-26 21:16:36
【问题描述】：

我用 WickedPdf 生成 PDF，它在本地就像一个魅力......

我在 Heroku 上遇到了麻烦。我可以下载 pdf，但它根本没有样式......（在我的订单和贴纸中都没有）

这是我的代码：

pdf.scss在vendor/assets/stylesheets中

orders_controller.rb

def show
  respond_to do |format|
    format.html { }
    format.pdf do
     html = render_to_string(template: "clients/orders/show.pdf.erb", layout: "layouts/application.pdf.erb", orientation: "Landscape", page_size: 'A4', encoding:"UTF-8" )
     pdf = WickedPdf.new.pdf_from_string(html)
     send_data(pdf, filename: "order.pdf", type: "application/pdf", disposition: 'attachment')     
    end
  end
end

stickers_controller.rb

def show
  respond_to do |format|
    format.html { }
    format.pdf do 
      html = render_to_string(template: "admin/stickers/show.pdf.erb", layout: "layouts/application.pdf.erb", orientation: "Landscape" )
      pdf = WickedPdf.new.pdf_from_string(html)
      send_data(pdf, filename: "sticker.pdf", type: "application/pdf", disposition: 'attachment')     
    end
  end
end

config/initializer/assets.rb

Rails.application.config.assets.precompile += %w( pdf.scss )

config/initializer/wicked_pdf.rb

if Rails.env.production?
  WickedPdf.config = {
   exe_path: Gem.bin_path('wkhtmltopdf-heroku', 'wkhtmltopdf-linux-amd64'),
   page_size: 'Letter',
   orientation: 'Portrait',
   margin: { top:    2,
           bottom: 2,
           left:   2,
           right:  2 }
 }

else

 WickedPdf.config = {
    exe_path: '/usr/local/bin/wkhtmltopdf',
    page_size: 'Letter',
    orientation: 'Portrait',
    margin: { top:    2,
             bottom: 2,
             left:   2,
             right:  2 }

  }
end

宝石文件

gem 'wicked_pdf'
gem 'wkhtmltopdf-binary', '~> 0.12.3'
gem "wkhtmltopdf-heroku"

layouts/application.pdf.erb

<html lang="fr">
<head>
  <meta charset="utf-8" />
    <%= wicked_pdf_stylesheet_link_tag 'pdf' %>
</head>
<body>
  <div>
    <%= yield %>
  </div>
</body>
</html>

在我的订单和贴纸中 show.pdf.erb 我使用引导 CDN 在顶部（我在应用程序的其余部分使用 bootstrap 4，但似乎 Wickedpdf 不适用于 bootstrap 4）。 Bootstrap CDN 在本地工作

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<div id="container">
  <div class="row">
    <table class="table table-striped line-items">
    #the test of the code
    </table>
   </div>
</div>

我找到了this exemple，但它对我不起作用.. 我在 Rails 5.2 上，这可能是不同之处......建议添加这个，但它实际上在 initializers/assets.rb

在config/environments/production.rb:

config.assets.precompile += ['documents.css.scss.erb']

【问题讨论】：

标签： ruby-on-rails wicked-pdf

【解决方案1】：

所以主要的样式问题来自 Bootstrap。

Bootstrap CDN 链接没有成功，所以我最终下载了bootstap css。基本上我没有选中所有，只保留了需要的东西，比如常见的 css。

我缩小了引导 css，将其粘贴到一个新文件 bootstrap.min.css 并放在 vendor/assets/stylesheets/ 和 pdf.scss 下

然后我在我的 pdf.scss 中导入了 boostrap 文件，如下所示：

@import "bootstrap.min";

【讨论】：