Wkhtmltopdf: Page background,

Created on 16 Apr 2018 · 4Comments · Source: wkhtmltopdf/wkhtmltopdf

How to set the background to each page of pdf like a watermark?

Question

Source

alankarglobant

👍6

Most helpful comment

@JonaLieb,

Yes, I am able to show an image as watermark on every page of PDF, but it is not actually set in the background as a watermark. I have applied a trick here, what I did is just placed the image on the content of every page of PDF with minimum opacity.

As this we need on every page I have placed the code in the header view file. ( the view which represents the pdf header)

Here is the sample:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TITLE</title>
    <style>
   /* NECESSARY CSS CLASSES AND ID WITH APPLIED PROPERTIES TO DISPLAY HEADER */
    </style>
  <script>
        function subst() {
            var vars = {};
            var x = document.location.search.substring(1).split('&');
            for (var i in x) {
                var z = x[i].split('=', 2);
                vars[z[0]] = unescape(z[1]);
            }
            var x = ['frompage', 'topage', 'page', 'webpage', 'section', 'subsection', 'subsubsection'];
            for (var i in x) {
                var y = document.getElementsByClassName(x[i]);
                for (var j = 0; j < y.length; ++j) y[j].textContent = vars[x[i]];

                if (vars['page'] == 1) { // If page is 1, set FakeHeaders display to none as don't want to show 
// the header first page of PDF
                    document.getElementById("FakeHeaders").style.display = 'none';
                }
            }


// HERE IS THE TRICK TO PLACE WATERMARK
// HERE BODY ELEMENT IS DIFFERENT FOR EVERY PAGE OF PDF
            if (!document.body.classList.contains('imgActive')) { // CHECK IS IMAGE ALREADY ADDED 
                document.body.classList.add('imgActive');
                var body = document.getElementsByTagName("body")[0];
                var img = document.createElement("img");

                img.src = "YOUR/IMAGE/PATH/watermark.png')}}";
                img.style.opacity = 0.5;
                img.style.marginTop = '40%';
// IF NOT ADDED AN IMAGE THEN ADD IT , TO DISPLAY IT AS WATERMARL
                body.appendChild(img);
            }
        }
// END

    </script>
</head>
<body style="height:35px;" onload="subst();">
    <!-- Log and Title -->
    <div class="row" id="FakeHeaders">
            // _ HTML _ HEADER _ VIEW 
     </div>
</body>
</html>

Make sure you are using optimize version of watermark image which is having very small size. I would suggest you can use very small size image so that it can be placed by the PDF library on every page, because as per my observation PDF library is taking time to generate the pdf with image on every page with respect to without image (watermark)

demo : Just for your reference I have added the last page snanpshot of generated PDF, but is showing on every page.

alankarglobant on 15 May 2018

👍3 ❤2

All 4 comments

@alankarglobant Hi I was wondering if you found a solution for this yet? I need to do the same.

JonaLieb on 15 May 2018