Question

虽然我只是不需要正常问一些东西（互联网只是一个金矿，特别是这个网站），这让我失望，因为我已经两天试图让这个工作，我不找到任何有用的东西。如果成立，我会感谢类似职位的链接，因为我没有找到。让我们开始吧。

<小时/> 我正在使用PDFKit与Python 2.7和Django 1.9生成一些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会变得疯狂。

（注意：是的，页面高度比HTML中的 height 大1mm，但这是必需的，因此包装器适合PDF页面。）

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

Answer 1

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

我想说我要打印A4纸张（你有一个列表here）。因此，将其翻译为px（因为它更容易设置cm或mm而不是手动计算像素），我们有1 mm = 3.779528 px。我们设置了CSS height: Xmm。容易。

当PDFKit使用我所知道的WebKit呈现HTML时，问题就出现了：WebKit只有3个小数精度点值，所以 3.779528 传递给 3.779 （如果我记得的话它朝向下方），这不是真正的大小。这意味着添加任何类型的边距/填充/定位都会破坏内容并创建魔术间距，因为长度不正确（即使您使用相同的尺寸单位）。

好消息是没有设置任何保证金/填充/定位不会破坏事情，所以在一些事情中它会足够好。

但是如果你需要添加边距或类似的东西怎么办？ 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数据，没有魔法间距。您只需要确保用于＆＃34;表示＆＃34;的元素。页面（此示例中为wrapper）与页面的尺寸相同。

Answer 2

您还可以删除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)

为什么PDFKit不能很好地利用边距？

2 个答案: