ruby-on-rails - WickedPDF 本地渲染与生产渲染不同

标签 ruby-on-rails ruby fonts wkhtmltopdf wicked-pdf

我已经在我的台式机上安装了wkhtmltopdf 0.12.3(带有修补的 qt),在我的 Centos 虚拟机上安装了完全相同的版本。

我正在使用 WickedPDF 和 Rails 将 HTML 转换为 PDF。

生成 PDF 时,其字体略有不同。一些奇怪的字母间距。我附上了显示此内容的图片。

Image grab from PDF on Centos VM

您可以看到 en 之间的差距,但这在我的本地机器上并不存在。下图:

enter image description here

有人知道为什么会这样吗?

如有任何建议,我们将不胜感激。

谢谢

这是我使用 WickedPDF 生成 PDF 的 Ruby 代码

def generate_pdf
    pdf = WickedPdf.new

    pdf_file = pdf.pdf_from_string(ActionController::Base.new().render_to_string('card_requests/show.pdf.haml', layout: 'pdf', locals: {card_request: self}),
      dpi: '300',
      margin: {top: 0, bottom: 0, left: 0, right: 0},
      page_height: '2.25in',
      page_width: '3.75in',
      disable_smart_shrinking: false
    )

    tempfile = Tempfile.new(["#{self.name.gsub(' ', '_').downcase}_biz_card", '.pdf'], Rails.root.join('pdfs'))
    tempfile.binmode
    tempfile.write pdf_file
    tempfile.close

    self.pdf = File.open(tempfile.path)
    tempfile.unlink

    self.save

  end

这也是顶部带有 CSS 的 show.pdf.haml 文件:

!!! 5
%html
  %head
    :css
      html * {
        margin: 0 !important;
        padding: 0 !important;
        page-break-inside: avoid !important;
      }
      body {
        margin: 0 !important;
        padding: 0 !important;
        page-break-inside: avoid !important;
        text-rendering: optimize-speed;
      }
      .card-preview {
        font-family: 'TradeGothic';

        background-size: contain;
        width: 369px;
        height: 220px;
        page-break-after: avoid !important;
        position: relative;
      }

      #card-name {
        color: #ED1D27;
        font-weight: bold;
        font-size: 12pt;
        position: absolute;
        top: 37px;
        left: 39px;
        width: 328px;
      }

      #card-title {
        color: #2E2D2D;
        font-weight: bold;
        position: absolute;
        top: 54px;
        left: 39px;
        font-size: 9pt;
      }

      #card-office-phone {
        color: #4e4e48;
        position: absolute;
        top: 148px;
        left: 39px;
        font-size: 8.5pt;
      }

      #card-cell-phone {
        color: #4e4e48;
        position: absolute;
        top: 135px;
        left: 39px;
        font-size: 8pt;
        width: 200px;
      }

      #card-email {
        color: #4e4e48;
        position: absolute;
        top: 161px;
        left: 39px;
        font-size: 8.5pt;
      }

      #card-website {
        color: #4e4e48;
        position: absolute;
        top: 174px;
        left: 39px;
        font-size: 8pt;
      }
      .hide {
        display: none;
      }
    %meta{:charset => "utf-8"}
  %body
    .card-preview{style: "background-image: url('#{Rails.root.join('app', 'assets', 'images', 'card_template_2.svg')}')"}
      #card-name
        = card_request.name
      #card-title
        = card_request.title
      #card-office-phone{class: (card_request.office? ? "" : 'hide')}
        == office 555 555 5555 #{card_request.ext? ? "ext #{card_request.ext_phone}" : ''}
      #card-cell-phone{class: ((card_request.cell? && !card_request.cell_phone.blank?) ? "" : 'hide'), style: (card_request.office? ? "" : 'top: 148px; left: 39px;')}
        = (card_request.cell? ? "cell 555 555 5555" : '')
      #card-email
        = card_request.email
      #card-website
        www.website.com

我已经通过以下操作解决了这个问题:

https://taskman.eionet.europa.eu/issues/20890

它为我修复了 CentOS 上的字距调整问题。

最佳答案

我在某些特定字母之后遇到了类似的空格问题,例如

Reg istration  ---> space after letter 'g'

O pen   ---> space after Capital letter 'O'

上述问题可能是由于系统特定的字体配置引起的。我提到了在 github 上报告的关于相同 https://github.com/wkhtmltopdf/wkhtmltopdf/issues/45 的问题

此问题发生在使用 CentOS 6.x 的生产实例 (AWS AMI linux) 上,但与 ubuntu 14.04 完美配合。我在路径/etc/fonts/conf.d 上查看了 CentOS 上的系统字体配置 51-local.conf 。如果在同一路径上没有名称为 wkhtmltopdf 的文件,则使用默认字体文件 51-local.conf 有以下配置为自定义字体。

<?xml version='1.0'?>
<!DOCTYPE fontconfig SYSTEM 'fonts.dtd'>
<fontconfig>
 <match target="font">
  <edit mode="assign" name="rgba">
   <const>rgb</const>
  </edit>
 </match>
 <match target="font">
  <edit mode="assign" name="hinting">
   <bool>true</bool>
  </edit>
 </match>
 <match target="font">
  <edit mode="assign" name="hintstyle">
   <const>hintslight</const>
  </edit>
 </match>
 <match target="font">
  <edit mode="assign" name="antialias">
   <bool>true</bool>
  </edit>
 </match>
 <match target="font">
  <edit mode="assign" name="lcdfilter">
   <const>lcddefault</const>
  </edit>
 </match>
</fontconfig>

此外,如果您使用 wicked_pdf.rb 初始化程序配置执行路径作为开发环境的 /usr/local/bin/wkhtmltopdf。尝试用 /bin/wkhtmltopdf 替换生产包的路径

关于ruby-on-rails - WickedPDF 本地渲染与生产渲染不同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35415058/

相关文章:

ruby-on-rails - 如果记录不存在,则使用#update 方法创建新记录

ruby-on-rails - Rails Rspec 模型规范用户:电子邮件 ActiveRecord::RecordInvalid

ruby - 使用 wice_grid Ruby On Rails 列中的多个链接

iphone - 在 iPad/iPhone 上使用 CSS @font-face

ruby-on-rails - rails 3 : Can't seem to write cookies for top level domain :(

ruby-on-rails - 在 ruby​​ 中使用用户名和密码的 http 请求

ruby-on-rails - 在另一个网站上提交动态表单

javascript - font-awesome 中的字体文件有什么用?

swift - 使用 Swift 将自定义字体添加到 macOS 应用程序

javascript - 为什么我的 Rails AJAX 请求会引发内部服务器错误?