为什么 PDFKit 不能很好地处理边距？答案

【问题标题】：Why PDFKit doesn't work well with margins?为什么 PDFKit 不能很好地处理边距？
【发布时间】：2017-02-06 08:08:45
【问题描述】：

虽然我通常不需要问什么（互联网只是一个金矿，尤其是这个网站），但这让我很失望，因为我已经花了两天时间试图让它工作，但我没有'找不到任何有用的东西。如果找到类似帖子的链接，将不胜感激，因为我没有找到。让我们开始吧。

我正在使用带有 Python 2.7 和 Django 1.9 的 PDFKit 来生成一些 HTML 到 PDF。工作轻松。 HTML 看起来像这样：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style type="text/css">
    * {
      /* Box-model */
      margin: 0;
      padding: 0;
    }

    .wrapper {
      /* Box-model */
      width: 229mm;
      height: 161mm;
    }
  </style>
</head>
<body>
  {% for someone in people %}
  <div class="wrapper">
    <p><strong>{{ someone.complete_name }}</strong></p>
    <p>{{ someone.bio }}</p>
  </div>
  {% endfor %}
</body>
</html>

我的 PDFKit 选项如下所示：

{
    "page-width": "229mm",
    "page-height": "162mm",
    "paper-size": "CE5",
    "encoding": "utf-8"
}

在这两种情况下，我只是不添加任何边距或填充。我生成了 PDF，看起来很棒（不出所料，一切都在它所属的地方）。但是，如果我在 HTML 和/或选项中添加任何边距/填充，我只会在生成 PDF 时获得持续重复的增量边距（举个例子，在 50 页中，第一个没有边距，而第 50 页或多或少有大约两个手指的边距）。我尝试了边距、内边距和高度的不同组合，但什么也没做：当我只添加边距或内边距时，PDF 会变得疯狂。

（注意：是的，page-height 比 HTML 中的 height 大 1 毫米，但这是必需的，以便包装器适合 PDF 页面）。

以前有人遇到过这个问题吗？提前致谢。

【问题讨论】：

标签： python django pdf pdfkit

【解决方案1】：

您还可以删除 PDF 默认边距

import pdfkit 

# Remove PDF margin options = {
    'page-size': 'Letter',
    'margin-top': '0.0in',
    'margin-right': '0.0in',
    'margin-bottom': '0.0in',
    'margin-left': '0.0in' }

pdfkit.from_url('https://www.google.co.in/','shaurya.pdf', options = options)

【讨论】：

【解决方案2】：

好的，我终于明白发生了什么：

假设我要打印 A4 尺寸的纸张（您有一个列表 here）。所以，将它翻译成px（因为它更容易设置cm 或mm 而不是手动计算像素），我们有1 mm = 3.779528 px。我们设置我们的 CSS height: Xmm。很简单。

当我知道的使用 WebKit 的 PDFKit 呈现 HTML 时，问题就出现了：WebKit 只有 3 位小数精度点值，所以我们的 3.779528 传递为 3.779 em> （如果我记得，它会向下舍入），这不是真正的大小。所以这意味着添加任何类型的边距/填充/定位都会破坏事物并产生神奇的间距，因为长度不正确（即使您使用相同的尺寸单位）。

好消息是不设置任何边距/填充/定位不会破坏事物，所以在某些方面它就足够了。

但是如果您需要添加边距或类似的东西怎么办？ CSS 的page-break 属性（链接的是page-break-after）来拯救。它确保在打印 HTML（通过渲染、通过网络浏览器）时不设置任何魔法间距。

考虑到这一点，一个例子是这样的：

<!DOCTYPE html>
<html>
<head>
  <style type="text/css">
    * {
      /* Box-model */
      /* To ensure no unexpected magic spacing */
      margin: 0;
      padding: 0;
    }

    .wrapper {
      /* Box-model */
      width: 197mm; /* + 100 from horizontal padding = 297 */ 
      height: 160mm; /* + 50 from vertical padding = 210 */
      padding: 25mm 50mm;
    }

    /* The selector applies the page break after, so we have to exclude the last wrapper */
    .wrapper:not(:last-of-type) {
      /* Box-model */
      page-break-after: always;
    }
  </style>
</head>
<body>
  {% for someone in people %}
  <div class="wrapper">
    <p><strong>{{ someone.complete_name }}</strong></p>
    <p>{{ someone.bio }}</p>
  </div>
  {% endfor %}
</body>
</html>

瞧，你有一个完美的模板来渲染 PDF 数据，没有魔法间距。您只需确保用于“表示”页面的元素（本例中为 wrapper）与页面的尺寸相同。

【讨论】：