1

I am struggling to make a repetitive background for a generated PDF.

I have a certificate that is automatically generated and certificate design has a frame that should repeat on all the pages...

I tried 

.main_container{
   background: url({{ resourceDir ~ 'img/certificate_margin.jpg' }}) 0 0;
   padding-top:15px;
   z-index: 99;
   background-size: cover;
   width:658px;
   height:975px;
}

but after the first page is displayed I only get the content and a white page. Did anyone managed to solve this issue some how? Or is it even possible to do it?

my config file:

knp_snappy:
    pdf:
        enabled:    true
        binary:     "%wkhtmltopdf_binary_path%"
        options:
            page-size: A4
            dpi: 150
            image-dpi: 150
            encoding: utf-8

and generation code:

$unsignedPdfContent = $this->snappy->getOutputFromHtml(
    $this->templating->render(
        $this->getTemplate(), [
            'certificate' => $this->certificate,
            'resourceDir' => __DIR__.'/../Resources/public/'
        ]
    )
);
Herr Nentu'
  • 1,438
  • 3
  • 18
  • 49

5 Answers5

2

I needed something to watermark each page of a PDF generated by wkhtmltopdf as draft so I tried @herr-nentu suggestion but it wasn't working then I made some adjustments to it.

Just add a style tag to the head section of your TWIG/HTML file with the following CSS:

<style>
/* Only tested background image with an absolute URL */
html .watermark {
 background: url('https://via.placeholder.com/700x963?text=DRAFT') 0 0 !important;
 padding-top: 0 !important;
 padding-left: 0 !important;
 z-index: 99 !important;
 background-size: cover !important;
 width: 700px !important;
 height: 963px !important;
 position: relative !important;
}
</style>

Then add the .watermark class to the body tag of your TWIG/HTML file:

...
<body class="watermark">
 <!-- HTML contents to display as PDF -->
</body>

Note for the image, I used a 700px width by 963px height (slightly smaller than A4 size) transparent background image with the text DRAFT positioned in the middle.

The same concept can be used for someone looking to add a background image.

Hope this helps... :D

Festus Ngor
  • 301
  • 2
  • 6
0

I managed to "solve" the problem.

Based on this question Why doesn't wkhtmltopdf page-break-after have any effect? I actually forced the page to manually break after a fixed point and create a new page with the same background.

OK, it's a "hackish" way but it did the job...

now my code looks like this

CSS

.main_container{
    background: url({{ resourceDir ~ 'img/certificate_margin.jpg' }}) 0 0;
    padding-top:15px;
    padding-left:5px;
    z-index: 99;
    background-size: cover;
    width:652px;
    height:975px;
    position:relative;
 }
.break{
        display: block;
        clear: both;
        page-break-after: always;
}

And the twig

...
<body>
<div class="main_container break" style='position:relative'>

    first page content 

    {% block body %}

    {% endblock %}

    {% include 'BlablaBundle:Pdf:_partial_certificate/_footer_contact.html.twig' with {'page': 'Seite 1/2'} %}
</div>

<div class="main_container" style='position:relative'>

    second page content

        {% include 'BlablaBundle:Pdf:_partial_certificate/_footer_contact.html.twig' with {'page': 'Seite 2/2'} %}
</div>
</body>
...
Community
  • 1
  • 1
Herr Nentu'
  • 1,438
  • 3
  • 18
  • 49
0

After thinking about this problem, I recommend just delegating out to something like pdftk and use the same logic for watermarks for a recurring background image.

https://www.pdflabs.com/docs/pdftk-man-page/#dest-op-multistamp

shicholas
  • 6,123
  • 3
  • 27
  • 38
0

What Festus mentioned is correct until a certain point.

For some reason it doesn't always works with my implementation. So based on another post and my own recommendations, you would only need to add the following code to your html file:

body {
    background: url("https://via.placeholder.com/700x963?text=DRAFT");
    background-position: center;
    background-repeat: repeat-y;
    background-size: 100%;
    background-attachment: fixed;
}

Now, by this time the background should be repeating but out of position. The solution is to fix the size of the image, as 700x963 will not cut it and it depends on your pdf configuration.

Lets remember that you can tell wkhtml two important things: page-size and margins (top, bottom, left, right). Depending on the page-size that you have selected, please consult the following link to get an exact value in inches (e.g. "Letter" is 8.5x11 inches). Now, depending on the margins you set for wkhtml, you will have to substract those margins from the page sizes (e.g. if we still have "Letter" as a page-size, and we set 1 inch in all margins, the result should be 6.5x9 inches). Your image must be this exact size.

// The previous paragraph can be interpreted as:

// Letter page-size
const page_size = {
  width: "8.5in", 
  height: "11in",
}

const image_width = to_px(page_size.width) - to_px(margin_left) - to_px(margin_right)
const image_height = to_px(page_size.height) - to_px(margin_top) - to_px(margin_bottom)
const url = "https://via.placeholder.com/" + image_width + "x" + image_height + "?text=DRAFT"

A couple of recommendations:

  • Use these sizes in inches, not in pixels, for wkhtml and your css. (This is how I am doing it, it might work with pixels but I am not sure)
  • If one of the margins is 0, remember to write the unit (e.g. 0in), or wkhtml will crash.
  • Pass the following configuration to wkhtml:
    • --background
    • --encoding UTF-8 so it can print symbols ($)
    • --enable-smart-shrinking so it doesn't make a mess of the sizes
  • The image should not have transparency. wkhtml can corrupt an image that has transparency at any moment and in any page (I have had large documents where the background image is painted only in the first 6 pages correctly). I still don't know if this is only limited to background images.
  • Use absolute urls for the images. wkhtml might not report an error but you will not see your image.
Daniel Ortiz
  • 186
  • 9
0

I solve it finally. Just add a style tag to the head section of your TWIG/HTML file with the following CSS:

<style>
    body {
      width: 100%;
      height: 0;
      background: url("https://www.api2pdf.com/wp-content/uploads/2018/09/draft.png") repeat-y center;
      background-size: 20%;
    }
</style>

most importantly do not use background-attachment: fixed;

teaGod
  • 1
  • 1