wkhtmltopdf - 背景颜色未填充第二页

问题描述 投票：0回答：3

我正在尝试使用 wkhtmltopdf 将 HTML 转换为 PDF 文档。

我正在运行的命令是 

wkhtmltopdf ./test.html test.pdf

软件版本：

wkhtmltopdf -V                  
wkhtmltopdf 0.12.5 (with patched qt)

内容是动态的，因此我真的不知道它会在哪里结束。

不幸的是，当内容呈现到第二页时，背景随内容一起停止。

下面的 HTML，我们将不胜感激任何帮助，并让老开发人员在经历了如此多的努力后感到高兴:)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<head>
  <title>Testing PDF</title>

  <link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">

  <style>
    html {
      height: 100%;
      background: #f3f8fb;
    }

    body {
      font-family: "Lato", sans-serif;
      color: black;
      background: #f3f8fb;
    }
  </style>
</head>

<body>

  <p>This is a test with lots of dynamic content</p>
  <p>This is a test with lots of dynamic content</p>
  <p>This is a test with lots of dynamic content</p>
  <p>This is a test with lots of dynamic content</p>
  <p>This is a test with lots of dynamic content</p>
  <p>This is a test with lots of dynamic content</p>
  <p>This is a test with lots of dynamic content</p>
  <p>This is a test with lots of dynamic content</p>
  <p>This is a test with lots of dynamic content</p>
  <p>This is a test with lots of dynamic content</p>
  <p>This is a test with lots of dynamic content</p>
  <p>This is a test with lots of dynamic content</p>
  <p>This is a test with lots of dynamic content</p>
  <p>This is a test with lots of dynamic content</p>
  <p>This is a test with lots of dynamic content</p>
  <p>This is a test with lots of dynamic content</p>
  <p>This is a test with lots of dynamic content</p>
  <p>This is a test with lots of dynamic content</p>
  <p>This is a test with lots of dynamic content</p>
  <p>This is a test with lots of dynamic content</p>
  <p>This is a test with lots of dynamic content</p>
  <p>This is a test with lots of dynamic content</p>
  <p>This is a test with lots of dynamic content</p>
  <p>This is a test with lots of dynamic content</p>
  <p>This is a test with lots of dynamic content</p>
  <p>This is a test with lots of dynamic content</p>
  <p>This is a test with lots of dynamic content</p>
  <p>This is a test with lots of dynamic content</p>
  <p>This is a test with lots of dynamic content</p>
  <p>This is a test with lots of dynamic content</p>
  <p>This is a test with lots of dynamic content</p>
  <p>This is a test with lots of dynamic content</p>
  <p>This is a test with lots of dynamic content</p>
  <p>This is a test with lots of dynamic content</p>
  <p>This is a test with lots of dynamic content</p>
  <p>This is a test with lots of dynamic content</p>
  <p>This is a test with lots of dynamic content</p>
  <p>This is a test with lots of dynamic content</p>
  <p>This is a test with lots of dynamic content</p>
  <p>This is a test with lots of dynamic content</p>
  <p>This is a test with lots of dynamic content</p>


</body>

</html>
pdf-generation wkhtmltopdf
3个回答
1
投票

我最终要做的是添加一页充满空段落的内容，然后使用 

pdftk

删除多余的页面
1
投票

使用 page-break-after: 总是；在 CSS 中，使其包含分页符，从而将背景颜色应用于整个页面。但问题是，添加了一个新页面。包含一个新块将解决这个问题。

参考：https://github.com/wkhtmltopdf/wkhtmltopdf/issues/3125

0
投票

我设法向 HTML 添加背景颜色，即使页面中有边距，该背景颜色也会渲染到 PDF 的所有页面中。

只需添加一个带有 

position: fixed;
的 div，当您将 HTML 渲染为 PDF 时，这个固定的 div 就会被复制到所有页面中。也可用于页眉、页脚等。

<style>

body {
  box-sizing: border-box;
}

@page {
  size: A4;
  margin: 100px 40px 40px;
}

.blank-bg {
  position: fixed;
  top: -100px;
  bottom: -40px;
  left: -40px;
  right: -40px;
  background-color: #F8F9FA;
  z-index: -1;
}

</style>

<body>

  <div class="blank-bg"></div>

</body>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.