渲染的 PDF 在生产中看起来不同 - Rails、PDFKit、wkhtmltopdf答案

【问题标题】：Rendered PDF looks different in production - Rails, PDFKit, wkhtmltopdf渲染的 PDF 在生产中看起来不同 - Rails、PDFKit、wkhtmltopdf
【发布时间】：2017-08-26 08:04:11
【问题描述】：

我正在使用 Rails pdfkit gem 来呈现多页 pdf 文件。呈现的 pdf 文件按预期选择 CSS(SCSS) 样式和分页符。但是，当我尝试在生产中渲染相同的 pdf 文档时，样式似乎只加载了一些 CSS 规则而忽略了其他规则，例如父容器的 width 和 height 声明。这是父容器元素的 CSS (SCSS)：

.policy_pdf{
  font-family: Arial, sans-serif;
  .pdf-page{
    width:98%;
    height:17.1in;
    margin:auto;
    page-break-after:always;        
    ...
    @media screen{
      border: 1px dotted red;
    }
    page-break-after:always;
  }
...
}

和 PDFKit 初始化器：

PDFKit.configure do |config|
  config.default_options = {
    :page_size => 'Legal',
  }
end

以下是 development 中呈现的 pdf 示例：

这是相同的 pdf 在生产中的外观：

文档周围的红线是我引入的一条 CSS 规则，用于显示页面边缘在生产中的呈现方式。

环境

开发和生产（Digital Ocean Droplet）都使用相同版本的 Ubutnu (16.04)。

你有什么尝试？

起初我认为我用于 pdf-kit 的一些 CSS 类（例如 .page）在编译时会被一些冲突的规则覆盖，所以我尝试使用唯一的类名，例如 .pdf-page 而不是 @987654334 @。
然后我尝试看看它是否与SCSS编译有关。但是同一个样式表中的嵌套边框和背景颜色声明正在被“拾取”并呈现得很好。编译后的 application.css 中的 policy-pdf 块看起来也正确。
禁用 smart-shrinking 会使 PDF 看起来更加“崩溃”。
按照this 帖子中的建议对html 标记应用尺寸/宽度CSS 规则（内联和通过外部样式表）：

线索：

生产和开发都运行相同版本的wkhtmltopdf (~> 0.12.2)。然而，运行wkhtmltopdf -V，返回wkhtmltopdf 0.12.2.1(with patched qt)

【问题讨论】：

对我来说切换到新服务器会使文档看起来不同。看起来我错过了一些字体，但我不确定。我正在研究它

标签： css ruby-on-rails pdf wkhtmltopdf pdfkit

【解决方案1】：

我有类似的问题。就我而言，它在 Ubuntu 上缺少字体。

 sudo apt-get install ttf-mscorefonts-installer
 sudo fc-cache

https://askubuntu.com/questions/651441/how-to-install-arial-font-in-ubuntu

【讨论】：

【解决方案2】：

生产输出似乎比开发输出有更大的利润。

从您给定的显示“页面配置”的相关 css 示例中，可以通过指定这些边距来简单地解决此问题。这不是在虚拟页面元素 .pdf-page 上完成的，而是在 @page 选择器内完成的。

@page { margin:10mm 15mm 10mm 15mm; }

根据此设计的开发和预览方式（打印对话框、开发工具媒体仿真），您可能需要调整这些边距以符合用于预览作品的边距。这可以在 Chrome 打印对话框中完成，方法是将目标设置为“另存为 PDF”，展开“更多设置”，在边距中选择“自定义”，最后输入值或直接拖动现在显示在打印预览上的边距。

虽然我不熟悉 PDFKit，但我为 AthenaPDF 提供了 developed templates，我认为它们几乎都是使用 Headless Chrome 引擎盖下的标准 PDF 转换器。我们发现通过 css 定义 @page 属性比尝试通过 AthenaPDF docker 服务配置它更容易、更灵活。 It only took standard, minimal and none as margin values.

【讨论】：

【解决方案3】：

不久前我也遇到过这样的问题。我不确定，但如果我没记错的话，它最终是不同版本的 ghost-script。

您可以通过运行gs -v查看版本

【讨论】：