wicked_pdf 在 unicode pdf 转换（ruby）中显示未知字符答案

【问题标题】：wicked_pdf shows unknown character on unicode pdf conversion (ruby)wicked_pdf 在 unicode pdf 转换（ruby）中显示未知字符
【发布时间】：2017-05-25 00:40:21
【问题描述】：

我正在尝试使用 wicked_pdf（版本 1.1）和 wkhtmltopdf-binary gems 从 html 页面创建 pdf。我的 html 页面包含一个日历表情符号，无论我使用什么字体，它都能在浏览器中很好地显示

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv='content-type' content='text/html; charset=utf-8' />
  <style>
  unicode {
     font-family: 'OpenSansEmoji', sans-serif;
  }
  @font-face {
     font-family: 'OpenSansEmoji';
     src: url(data:font/truetype;charset=utf-8;base64,<-- encoded_font_base64_string-->) format('truetype');
  }
 </style>
 </head>
 <body>
 <div><unicode>&#128197;</unicode></div>
 </body>
 </html>

但是，当我尝试在 rails 控制台中使用 gem 的 WickedPdf.new.pdf_from_html_file 方法生成 PDF 时，

 File.open(File.expand_path('~/<--pdf_filename-->.pdf'), 'wb+') {|f| f.write  WickedPdf.new.pdf_from_html_file('<--absolute_path_of_html_file-->')}

我得到以下结果：

PDF result with unknown character

如您所见，第一个日历图标显示正确，但是显示了第二个字符，我们不知道它来自哪里。

我已经按照相关帖子 stackoverflow_emoji_wkhtmltopdf 的建议通过 UTF-8 和 UTF-16 和代理对的编码进行了调查，并查看了这个问题 wkhtmltopdf_git_issue，但仍然无法使这个字符消失！

如果您有任何线索，我们非常欢迎。

提前感谢您的帮助！

编辑

根据 Eric Duminil 和 petkov.np 的 cmets，我可以确认 - 上面的代码在 Linux 上正常工作。似乎这是 Linux 与 MacOS 的问题。谁能建议 MacOS 绑定问题的核心是什么以及是否可以修复？

【问题讨论】：

它适用于您的 html 和 ruby 代码。宝石清单 | grep pdf : pdf-core (0.6.1) pdf-inspector (1.2.1) pdf-reader (1.4.0) wicked_pdf (1.1.0) wkhtmltopdf-binary (0.12.3.1) ruby -v: ruby 2.3.1p112 ( 2016-04-26 修订版 54768) [x86_64-linux] 在 linux mint 17 上
@EricDuminil 我已经在 Linux 环境下进行了测试，它可以工作。刚刚编辑了我的问题

标签： ruby-on-rails ruby unicode wkhtmltopdf wicked-pdf

【解决方案1】：

我已经多次编辑这个答案，请看最后的注释以及cmets。

我使用的是 macOS 10.12.2 并且遇到了同样的问题。我列出了所有浏览器等版本，尽管我怀疑最大的因素是 OS/wkhtmltopdf 构建。

Chrome：版本 55.0.2883.95（64 位）
Safari：版本 10.0.2 (12602.3.12.0.1)
wkhtmltopdf：0.12.3（已修补 qt）

我正在使用以下示例 sn-p：

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html" charset="utf-8">
    <style type="text/css">
      p {
        font-family: 'EmojiSymbols', sans-serif;
      }
      @font-face {
        font-family: 'EmojiSymbols';
        src: local('EmojiSymbols-Regular.woff'), url('EmojiSymbols-Regular.woff') format('woff');
      }

      span:before {
        content: '\01F60B';
      }
    </style>
  </head>
  <body>
    <p>
      ?
      <span></span>
      &#x1F60B;
      &#128523;
      &#xf0;&#x9f;&#x98;&#x8b;
    </p>
  </body>
</html>

我正在使用--encoding 'UTF-8' 选项呼叫wkhtmltopdf。

你可以看到渲染结果here（我很抱歉这个蹩脚的截图）。一些简短的结论：

~~Safari 无法正确呈现“原始”UTF-8 字节。似乎将它们视为原始字节序列（html 段落中的最后一行）。~~ Safari 渲染一切正常。
Chrome 渲染一切正常。
使用上述选项，wkhtmltopdf 可以正常呈现原始字节（有点），但不能正确呈现 CSS content 属性。 unicode 符号的每一次“正确”出现都跟随着这个奇怪的幻象符号。

我什么都试过了，但结果都是一样的。 ~~对我来说，即使 Safari 也无法正确呈现原始字节，这表明存在 macOS 特有的系统级问题。~~ 我不清楚这应该报告为 wkhtmltopdf 问题还是macOS 构建中有一些行为不端的依赖项。

编辑： Safari 似乎工作正常，我的标记已损坏。

编辑：CSS 解决方法可能会解决问题，请检查下面的 cmets。

最终编辑： 如 cmets 所示，解决问题的 CSS 'hack' 使用 text-rendering: optimizeLegibility;。这似乎只在 macOS/OS X 上需要。

来自我下面的评论：

我刚刚发现了这个问题。乍一看似乎无关紧要，但添加了文本渲染：optimizeLegibility；我的样式删除了重复的字符（在 macOS 上）。为什么会发生这种情况超出了我的理解。正如问题作者也使用 osx，很明显这个操作系统的 wkhtmltopdf 构建存在一些问题。

【讨论】：

petkov.np 您可以尝试像 OP 那样将 Base64 内联吗？例如：<%= Base64.strict_encode64(Rails.application.assets['EmojiSymbols-Regular.woff'].source) %>
我也尝试过对字体进行base64编码，它对渲染的pdf没有任何影响。
刚刚尝试在 Ubuntu 16.04 上使用 wkhtmltopdf 0.12.2.4 进行渲染，结果符合预期。
@petkov.np 我刚刚在 Linux 环境中测试了我的代码，它确实有效。这可能是 MacOS 绑定问题。刚刚在我的问题中添加了这个评论
我刚刚找到this issue。乍一看似乎无关紧要，但在我的样式中添加 text-rendering: optimizeLegibility; 会删除重复的字符（在 macOS 上）。 为什么会发生这种情况我无法理解。由于问题作者也使用 osx，因此 wkhtmltopdf 为这个 os 构建显然存在一些问题。