PDF printed document blurry

[hmilas]

Attach (recommended) or Link to PDF file
zebra document.pdf

Configuration:

• Web browser and its version: Chrome Version 108.0.5359.126 (Official Build) (64-bit)
• Operating system and its version: Windows 11 Pro Version 10.0.22621 Build 22621
• PDF.js version: Latest on web https://mozilla.github.io/pdf.js/web/viewer.html
• Is a browser extension: N/A

Steps to reproduce the problem:

1. Upload attached document to https://mozilla.github.io/pdf.js/web/viewer.html (button for upload is on the right side labeled as 'Open File')
2. Click viewer right side button 'Print'
3. Print destination: 'Microsoft Print to PDF' or 'Save as PDF' (or use Zebra GTK 420t printer as I do in production)
4. Printed document image barcode is blurred (note that barcode is image, not font)

What is the expected behavior? Printed document is not blurred

What went wrong? (add screenshot)

Actually, I'm using https://github.com/stephanrauh/ngx-extended-pdf-viewer, which then uses pdf.js, but the problem is also reproducible on https://mozilla.github.io/pdf.js/web/viewer.html

If you take attached PDF, and print it from Chrome browser directly or from Adobe Acrobat, it is crisp.
But if you print it from pdf.js, it becomes blurry.

Actual printer that is used in production code is Zebra GTK 420t, which has 202 dpi, and works crisp when directly printing both from Adobe Acrobat and Chrome.

Link to a viewer (if hosted on a site other than mozilla.github.io/pdf.js or as Firefox/Chrome extension):
https://mozilla.github.io/pdf.js/web/viewer.html

[Snuffleupagus]

Duplicate of #2750

[hmilas]

Hi @Snuffleupagus, I'm not sure if I understand correctly.
Is there currently a bug within pdf.js or Firefox or there is some workaround?

I have tried setting printResolution option in Chrome console for my document in https://mozilla.github.io/pdf.js/web/viewer.html, as instructed in #2750 (comment), for example: PDFViewerApplicationOptions.set('printResolution', 300)

but the blurry still persists when printing (I have tried multiple resolutions: 300, 600 and 1200; also 60 to confirm that the property is applied through Chrome Console)

[luxlux]

I just came across pdf.js. i'm also interested in using it to print to zebra printer.

@hmilas: I have opened https://mozilla.github.io/pdf.js/web/viewer.html and used console to set printresolution to 600 dpi with PDFViewerApplicationOptions.set('printResolution', 600). i dit it on mac os / chrome. I printed to pdf. With the standard 150 dpi resolution the print was really bad. everything was blured: the text, the outside edges of the barcode image and also the barcode image inside.
But when printing with 600dpi: the text and the outside edges of the barcode image look crisp. only the inside of the image looks still blured. but this is caused by the image itself, which is blured inside still in your file.
Anyhow when zooming in a lot, i see still a light blur also at the the outside image edges of the 600dpi print pdf. This is a difference to the print pdf produced with the chrome included PDF printer: there is absolutely no blur at the outside edges of the image!
I guess the light blur is caused by the rendering settings inside pdf.js, also the text is rendered a bit blured, which is in most cases a usefull behavior, but for some usecases a hard rendering is the better choise. It would be good if there was a setting for sharp edges in rendering.

But anyhow, when i look at your PDF, when using the setting PDFViewerApplicationOptions.set('printResolution', 300) the biggest problem is not the light blurring of pdf.js, it is the very strong blur in the barcode images in you pdf. I would say you need to change the image rendering when building your PDFs to not blur the images.

[luxlux]

I spent a few more hours analyzing the problem. I noticed that the blurriness in the barcode that I saw in your original ZIP file is apparently only created by the PDF renderer of mac os. When I open the original file in the Chrome PDF Viewer and zoom it in a lot, all the lines are totally clear!

So it is really a solution to simply set set PDFViewerApplicationOptions.set('printResolution', 300).

I also have played a bit with the hello world example, but i needed to do it on my own server, because otherwise i was not able to get your pdf in because of CORS.

here you can check the different render results for your PDF for different settings for scale and outputScale with changing the values in the URL: https://digiscales.de/test/pdf.js/?scale=2&outputScale=4

[luxlux]

One interesting thing i found out while playing with different values for scale and outputScale. Usually the quality gets better with higher values for outputScale. But not for all!
With 3 and 4 the result is sharp:
https://digiscales.de/test/pdf.js/?scale=3&outputScale=4
with 3 and 5 the result of barcode is very blurry:
https://digiscales.de/test/pdf.js/?scale=3&outputScale=5
but with 3 and 6 the result is sharp again:
https://digiscales.de/test/pdf.js/?scale=3&outputScale=6

its also blurred
with 3 and 10
and 3 and 20
...

With these combinations the inner barcode it looks as bad, as with the mac os renderer.