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

Question

我正在使用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

以下是开发中呈现的pdf示例：

以下是生产中相同pdf的外观：

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

环境

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

你有什么尝试？

• 起初我认为我在pdf-kit使用的一些CSS类（例如.page）会被编译时的一些冲突规则覆盖，所以我尝试使用唯一的类名，例如.pdf-page代替.page。

• 然后我试着看看它是否与SCSS编译有关。但是同一样式表中的嵌套边框和背景颜色声明会被“拾取”并呈现得很好。编译的policy-pdf内的application.css块看起来也是正确的。

• 禁用smart-shrinking会让PDF看起来更加“崩溃”。

• 根据this帖子中的建议，将尺寸/宽度CSS规则（内联和外部样式表）应用于html标记：

线索：

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

Answer 1

我也有这样的问题。 我不确定，但如果我没记错的话，它最终成了鬼剧的不同版本。

您可以通过运行gs -v

来检查版本

Answer 2

生产输出的边距似乎比dev输出更大。

从您给出的＆＃34;页面配置＆＃34;的相关css的给定样本中，可以通过指定这些边距来简单地解决这个问题。这不是在虚拟页面元素.pdf-page上完成的，而是在@page选择器内。

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

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

虽然我不熟悉PDFKit，但是对于AthenaPDF我是developed templates，我认为它们都是使用Headless Chrome的标准PDF转换器。我们发现通过css定义@page属性更容易，更灵活，而不是尝试通过AthenaPDF docker服务进行配置。 It only took standard, minimal and none as margin values

Answer 3

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

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

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