CODEWITHSUNDEEP
pdf-generationwkhtmltopdf
Immutable Brick
Immutable Brick

Reputation: 820

wkhtmltopdf - background color doesn't fill second page

I am trying to convert an HTML to a PDF document with wkhtmltopdf.

Command I am running is wkhtmltopdf ./test.html test.pdf

Software version:

wkhtmltopdf -V                  
wkhtmltopdf 0.12.5 (with patched qt)

The content is dynamic therefore I don't really know where it will end.

Unfortunately when the content renders to the second page the background stops with the content.

HTML below, any help would be fully appreciated and make an old developer happy after struggling so much :)

<!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>

Upvotes: 2

Views: 1599

Answers (3)

nktkarnany
nktkarnany

Reputation: 53

I managed to add a background color to the HTML that gets rendered into all the pages of the PDF even if I have margins in the page.

Just add a div with position: fixed; and when you render the HTML into PDF, this fixed div is copied into all the pages. Which can also be used for headers, footers, etc.

<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>

Upvotes: 0

Lavanyaa Deivasigamani
Lavanyaa Deivasigamani

Reputation: 11

Use page-break-after: always; in the CSS so that it includes a page break and hence the background color is applied to the entire page. But the issue with that is, a new page gets added. Including a new block will fix that.

Reference: https://github.com/wkhtmltopdf/wkhtmltopdf/issues/3125

Upvotes: 1

Immutable Brick
Immutable Brick

Reputation: 820

What I end up doing is adding 1 page full of empty paragraphs and then delete the extra page with pdftk

Upvotes: 1

Related Questions