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

Posted

技术标签:

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

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

【问题讨论】:

对我来说切换到新服务器会使文档看起来不同。看起来我错过了一些字体,但我不确定。我正在研究它 【参考方案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查看版本

【讨论】:

以上是关于渲染的 PDF 在生产中看起来不同 - Rails、PDFKit、wkhtmltopdf的主要内容,如果未能解决你的问题,请参考以下文章

在 Rails 中嵌套资源时的不同视图

在 Rails 生产中禁用资产缩小

Rails 4 + Sass - 生产中没有背景图片

使用 Rails 助手渲染部分

Rails 回形针,多种不同类型(PDF、图像、文档...)

Rails 以不同的格式渲染动作