Manually add watermark for printing

Technical Support
1

Which product are you using?
PDF.js Express Plus

PDF.js Express Version
8.3.0

Detailed description of issue
I wanted to know if there was a way to add a watermark to the pdf when it is printed. I know there is a UI available in the print menu, but just wanted to know if there was a manual process so that a user always has a watermark when they print.

Expected behaviour
Add a watermark to the pdf when it’s printed, we don’t want the watermark to appear in the viewer.

3

Hello, I’m Ron, an automated tech support bot :robot:

While you wait for one of our customer support representatives to get back to you, please check out some of these documentation pages:

Guides:APIs:Forums:

4

Hi Andy,

While there isn’t a specific API to handle this, you could find the print button in the HTML and add an event listener to add a watermark on click.

Something like this would work:

  const { documentViewer } = instance.Core;
  const iframeDoc = instance.UI.iframeWindow.document;
  const printButton = iframeDoc.querySelector('[data-element="printButton"]');

  printButton.addEventListener('click', () => {
    console.log('clicked')
    documentViewer.setWatermark({
      // Draw diagonal watermark in middle of the document
      diagonal: {
        fontSize: 25, // or even smaller size
        fontFamily: 'sans-serif',
        color: 'red',
        opacity: 50, // from 0 to 100
        text: 'BUTTon clicked'
      }
    });
  });

Best Regards,
Zach Serviss
Web Development Support Engineer
PDFTron Systems, Inc.

5

Thanks Zach, would this then add a watermark onto the document view as well after printing?

6

No it does not had the watermark to the viewer, only on the print view.

7

I just tested, and I can see the watermark in the document viewer after closing the print modal.

I think I just need to erase the watermark once the modal is closed. Is there a method for erasing a watermark?

8

Sorry Andy, I didn’t do enough testing to see that it did add the watermark to the document viewer!

Simply setting the watermark to an empty object should do the trick.

  window.addEventListener('afterprint', () => {
    documentViewer.setWatermark({});
  });
9

Hey @zserviss This doesn’t seem to work for me.

10

Which browser are you using?


Share how you are using PDF.js Express in your organization you could win a $500 Amazon gift card. All participants will receive 6 months of PDF.js Express+ for free. Learn more here

11

I’m using Chrome v104. The afterprint listener doesn’t appear to hook into anything.

12

I’ve tested it in Safari and it works there.

Maybe try an other event listener like when the print modal is closed or something else. I can confirm that setting the watermark to an empty object clears the watermark.


Share how you are using PDF.js Express in your organization you could win a $500 Amazon gift card. All participants will receive 6 months of PDF.js Express+ for free. Learn more here

13

Okay here’s what I have done to solve this:

instance.iframeWindow.addEventListener("visibilityChanged", (event) => {
  if (event.detail.element === "printModal") {
    if (event.detail.isVisible) {
      // Draw diagonal watermark in middle of the document
      documentViewer.setWatermark({
        diagonal: {
          fontSize: 55,
          fontFamily: 'sans-serif',
          color: 'red',
          opacity: 40,
          text: 'Custom watermark text'
        }
      })
    } else {
      // Clear the watermark
      documentViewer.setWatermark({})
    }
  }
})
14

Excellent! Happy to hear you were able to solve this. :smiley:


Share how you are using PDF.js Express in your organization you could win a $500 Amazon gift card. All participants will receive 6 months of PDF.js Express+ for free. Learn more here

1 Like