.printInBackground is not working on Mac OS monterey 12.5.1 with Chrome

[hi1]

Which product are you using?
PDF.js Express Viewer

PDF.js Express Version
8.3

Detailed description of issue
The latest Mac OS Monterey 12.5.1 can not work with “printInBackground”.
The function won’t work after upgrading 12.5.1.
Even I am using latest version of Chrome. It is still.

Expected behaviour
It should prompt printer dialog.

Does your issue happen with every document, or just one?
every document.

Link to document
N/A

Code snippet
Here are the code.

 instance.UI.useEmbeddedPrint(true);
              instance.UI.setPrintQuality(7);
              instance.UI.printInBackground({
                includeAnnotations: false,
                includeComments: false,
              });

[system]

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

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

Guides:

• Integrating PDF.js Express Viewer into an existing Angular project - Setup
• Integrating PDF.js Express Viewer into an existing Blazor project - Integrate PDF.js Express Viewer
• Support forms with PDF.js Express

APIs:

• UndefinedgetInstance( [element])
• Core.Tools.TextSquigglyCreateTool - contextMenu(e)
• Core.Annotations.RotationUtils - PathCustomAnnotationRotationMixin()

Forums:

• PrintInBackground: print quality
• Responsive Issue - Opera Browser
• Cannot lock pdf

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

[kkim]

Hello there,

I tested the provided code on browserStack Mac OS Monterey latest Chrome:

and also on the dev environment

And the print preview modal opens up.

Does the issue only happen for MacOS Monterey on Chrome?
Is it reproducible on MacOS different browsers?
Is it reproducible on different OS on Chrome?

Best Regards,
Kevin Kim
Web Development Support Engineer
PDFTron Systems, Inc.

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

[hi1]

I think browserStack can not specify the mac os version.

Because we didn’t open the print feature for other browsers.
Currently, this only happened on 12.5.1 Intel chip mac with the latest Chrome.
Does your dev environment use 12.5.1 as well?
Do you know what else situation can cause the issue?
Should I let merchants test it on different browsers?

[kkim]

The dev environment was tested on 12.5.1 Monterey on Apple M1 chip with the latest Chrome.

Would you be able to verify if it also occurs on the M1 chip?

If the users are not using Chrome, they may need to disable the useEmbeddedPrint: PDFJS Express WebViewer Namespace: UI

Thank you in advance.

Best Regards,
Kevin Kim
Web Development Support Engineer
PDFTron Systems, Inc.

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

[hi1]

It only happened on Chrome with Intel chip on version 12.5.1.
M1 is okay.
Is there any same issue from other users?

[kkim]

Hi there,

I am unable to reproduce the issue on Chrome with Intel Chip on the same MacOS version.
Can you send me a video or access to the environment to reproduce the issue?

Thank you in advance.

Best Regards,
Kevin Kim
Web Development Support Engineer
PDFTron Systems, Inc.

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

[kkim]

Another problem could be related to the older PDFjs version. If possible can you upgrade and see if it is reproducible?

Thank you in advance.

Best Regards,
Kevin Kim
Web Development Support Engineer
PDFTron Systems, Inc.

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

[hi1]

@kkim

PDFjs version

Hello there,
Do you mean you want me to upgrade pdfjs.express from 8.3.0 to 8.7.0?

[kkim]

That is correct, sorry for the confusion.

Best Regards,
Kevin Kim
Web Development Support Engineer
PDFTron Systems, Inc.

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

[kkim]

Hi there,

This post seems to talk about the issues of accessing the iframe through cross-origin:

SecurityError: Blocked a frame with origin from accessing a cross-origin frame

It looks like window.postMessage can help with this problem.

Here is a similar forum post regarding the issue:

Is there any CDN url for PDFJS express library

Hi there! There is no way to work around this specific error unfortunately. This is a security restriction imposed by web browsers that disallows iframes on a different origin to access the contents of the main window. Without this restriction, malicious code could be loaded in an iframe which would then have access to the main window, which is a huge security risk. What you can do however, is use the postmessage API to send messages between windows. The only drawback to this is that the data…

which leads to using this guide to setup config file for cross-origin:

PDF.js Express Viewer Config Files | Documentation

Loading PDF.js Express from a CDN or another origin | Documentation

Best Regards,
Kevin Kim
Web Development Support Engineer
PDFTron Systems, Inc.

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

[hi1]

Hi there, thanks for the quick reply.
It is a bit different. Because the issue only happened when the print button was clicked.
In other words, the viewer showed up and worked well without prompting any CORS error except for when print button clicked. The CORS error is triggered only when we click the print button.

We load documents in blob URL format, not web URLs. Is it a case that could lead to the issue?
I attached the network image for a better understanding. This request occurs when clicking the print button.
The file is at the exact same origin. The image below is my environment.
Do blob:https://google.com and https://google.com are the same origin?
If they are of the same origin, why does the error only happens when printing?

We can implement post messages, but we want to clarify the root cause first.

Do you think that we add “blob:hostname” to the white list of pdfjs.express.
Would that be helpful?

Thanks.

[kkim]

Hi there,

When the print modal shows up, do you have the same url request to the blob? Does the image preview properly show up?
From the screenshot the 200 response status should mean that you would be able to retrieve the blob when clicking the print button.

As for the blob URL vs web URL, I believe they are not in the same context hence adding the blob URL to the whitelist won’t make a difference here.

What is considered same origin or not:

Same-origin policy - Web security | MDN

Where as blob URL is created from URL.createObjectURL():

Using files from web applications - Web APIs | MDN

Best Regards,
Kevin Kim
Web Development Support Engineer
PDFTron Systems, Inc.

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

[hi1]

@kkim

When the print modal shows up, do you have the same url request to the blob? Does the image preview properly show up?

Hi kkim, thanks for getting me back.
the image preview is okay and show up properly, the issue only happen when he click print button.

The image below comes from the client, and you can see that although the response status is 200 but it still shows an error here.
Is there any way that we can do more tests on his environment to see if there is any issue happening on his Chrome 104 latest browser?

[kkim]

Hi there,

When I click the bottom right print button on the demo site (PDF.js Viewer Demo | PDF.js Express)

I get a requests equal to the number of pages with data as an image (the bottom 7 requests):

Is that the expected network behaviour for your other users that are not experiencing this issue?

Best Regards,
Kevin Kim
Web Development Support Engineer
PDFTron Systems, Inc.

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

[hi1]

Hi,
No, all the other users won’t encounter load base64 URL behavior.
We are using blob URL to load and embedded print, so it will only show blob:HTTP://HOST on the network request.
Base64 will change print orientation by default, so we prefer to use embedded print to keep it the same.

Although he can open your demo site and print it out without any issue.
But I think the main difference is we are using blob URL to load documents.
However, the demo site uses using PDF URL to load documents, not blob URL.

If you are using blob URL to load, I think it won’t show the base64 request here.
This is the extra error message.

Do you want to try on our testing environment? I can prepare an account for you.
I will let the client try base64 print as well ( without embedded print ).

[kkim]

Hi there,

I managed to find another ticket similar to this issue where a problem was solved with disabling all extensions and trying incognito/private mode. Can you see if that resolves the issue?

Best Regards,
Kevin Kim
Web Development Support Engineer
PDFTron Systems, Inc.

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

[hi1]

Hi kkim, thanks for supporting us on the issue.
The client and we found the solution.
It turns out he needs to change the Chrome settings.

Chrome > Settings > Privacy and Security > Site Settings > Additional Content Settings > PDF Documents.

I hope it helps the other people who have the same issue.