Listen for the print event

Technical Support
1

Which product are you using?
PDF.js Express Plus

PDF.js Express Version
8.1.1

Detailed description of issue
Wanting to know if there is a way to attach an event listener onto the print method.

Expected behaviour
When a user clicks the print button I would like to be notified.

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,

Thanks for your question.

One option would be using the UI event VISIBILITY_CHANGED. (Click here for this event documentation)

Here is a code snippet to help you

import WebViewer from '@pdftron/pdfjs-express-viewer'

WebViewer({
...options
}).then(instance => {

  const UIEvents = instance.UI.Events;

  instance.UI.addEventListener(UIEvents.VISIBILITY_CHANGED, e => {
    const { element, isVisible } = e.detail;
    if(element === 'printModal' && isVisible) {
      console.log('The user clicked the print button and the print modal is now open');
    }
  });

})

Let me know if this works for you.

Thank you,
Dandara

5

Thanks Dandara, this will be helpful and I’ll give it a try.

Know of any way to track the print button after they’ve opened this modal?

6

Hi Andy, my pleasure.

You can add the following code to track the print button after the modal is open.

import WebViewer from '@pdftron/pdfjs-express-viewer'

WebViewer({
...options
}).then(instance => {
    ...

    const iframeDoc = instance.UI.iframeWindow.document;
    const modalPrintButton = iframeDoc.querySelector('.PrintModal .button');
    
    modalPrintButton.addEventListener('click', () => {
      console.log('Print button was clicked');
    });

})

Do you mean the print button inside the modal, correct?
Please let me know if this works for you.

Thanks,
Dandara

7

This worked Dandara, thanks for showing me how to access the iframe document.

:+1: :+1:

1 Like