Listen for the print event

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.

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:

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

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?

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

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

:+1: :+1:

1 Like