Watermark using pdfmake

Question

In Javascript, I am using pdfmake to generate a pdf document. I read it from github that it supports watermark and the following is my usage but it is giving me some random and weird characters. Those characters are the same no matter what texts are provided in watermark. Anyone got an idea?

pdfmake

Indocile

Answer 1

I can't say as I have a solution to this problem, but I have made it work for me. It seems the renderWatermark() function at or around line 465 or pdfmake.js has problems with encoding the font.

var encoded = watermark.font.encode(watermark.text); returns a blank string, and doesnt have the extended properties the function is looking for later on.

By changing

pdfKitDoc.addContent('/' + encoded.fontId + ' ' + watermark.size.fontSize + ' Tf');

to

pdfKitDoc.addContent('/ ' + watermark.size.fontSize + ' Tf');

and

pdfKitDoc.addContent('<' + encoded.encodedText + '> Tj');

to

pdfKitDoc.addContent('(' + watermark.text + ') Tj');

I was able to get a watermark to show up in the correct position, albeit with a generic font rather than anything I had selected.

Lorollas

Answer 2

Solution: use this example from the docs:

var docDefinition = {
    //watermark: 'test watermark',
    watermark: {text: 'test watermark', color: 'blue', opacity: 0.3, bold: true, italics: false},
    content: [
        'Test page of watermark.\n\n',
    ]
};

Westberry

Answer 3

I made few more changes to make watermark work as I wanted. Below are the changes I did in printer.js

pdfKitDoc.fill('darkgray'); // Change colour
pdfKitDoc.opacity(0.3); // Change opacity as watermark was too dark for my liking

Commented out below to keep the watermark text horizontal
//var angle = Math.atan2(pdfKitDoc.page.height, pdfKitDoc.page.width) * 180/Math.PI;
//pdfKitDoc.rotate(0, {origin: [pdfKitDoc.page.width/2, pdfKitDoc.page.height/2]});

// Changed width and height for proper rendering of watermark text horizontally
pdfKitDoc.addContent('' + (pdfKitDoc.page.width/2 - watermark.size.size.width/4) + ' ' + (pdfKitDoc.page.height/2 - watermark.size.size.height/4) + ' Td');

Ideally, colour, opacity & text orientation should be configurable.

Haworth

Answer 4

Example

let docDefinition = {
        //watermark: 'watermark',
        watermark: {text: 'watermark', color: 'black', opacity: 0.3, bold: true, italics: false},
        content: [
             { text: "watermark test", fontSize: 18 },,
        ]
    };

Mercy