Blurry PDF uploads

[elchaparrito1]

Before you start - checklist

• [X] I followed instructions in documentation written for my React-PDF version
• [X] I have checked if this bug is not already reported
• [X] I have checked if an issue is not listed in Known issues
• [X] If I have a problem with PDF rendering, I checked if my PDF renders properly in PDF.js demo

Description

I have an issue where there seems to be a decent level of px degradation when a pdf is uploaded to company AWS S3, and a customer goes to view it on company's platform. It isn't way noticeable, unless the PDF image is already of lower quality. Example of section of PDF prior to upload (is from customer invoice so don't want to show whole PDF):

And what is looks like after upload, and is clicked for viewing:

We were using version 5.1.0 and upgraded to 5.7.1 and this did not help the quality.

Steps to reproduce

Use PDF.js Demo locally to test quality of PDF for viewing online.

Expected behavior

Expected behavior is for pdf image to at least have the same px quality as before.

Actual behavior

Appears to be some degradation after PDF is ran though API services for upload.

Additional information

No response

Environment

• Browser (if applicable):
• React-PDF version:
• React version:
• Webpack version (if applicable):

[jdc-cunningham]

A bit late but commenting for ideas

I'm assuming you checked that after uploading your PDF/viewing it whether by public/direct S3 url or downloading from S3 and opening in a browser it's not blurry there?

If it looks good above then I would check the scale of the rendered react-pdf size (checking if modifying it improves quality (width/height or scale values)).

From my experience our PDFs were getting blurry because I was taking DOM screenshots/uploading that vs. using the original pdf/stacking changes on top of it using pdfkit on the backend.

[otnansirk]

Sorry A bit late. is this solved? But it's okey, I hope this helps the next reader.

have you tried add scale props to Page component. If not. To overcome blurry you can add props scale={5}. you can try replace 5 to 1,2,3, or you can try another number.

It's works for me.

[wojtekmaj]

Scale should be automatically multiplied by devicePixelRatio so that shouldn't be the problem. At least on all my test devices PDFs are rendering super sharp.

[elchaparrito1]

Sorry. Coming back late to this. I will try the scale prop and see if that offers any improvements.

[github-actions[bot]]

This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this issue will be closed in 14 days.

[github-actions[bot]]

This issue was closed because it has been stalled for 14 days with no activity.

[georgiossalon]

,2,3, or you can try another num

So multiply what with window.devicePixelRatio?

Example: <Document scale={window.devicePixelRatio*}/>

[tsaxena4k]

Did anyone found the solution here ?

[wojtekmaj]

Scale is automatically multipled by devicePixelRatio so that shouldn't be a problem for a long time now. If it is, I'm gonna need a repro.

[VikasPathaniaa]

have you tried add scale props to Page component. If not. To overcome blurry you can add props scale={5}. you can try replace 5 to 1,2,3, or you can try another number. scale={5} It's works for me.

[Anhaachan]

Why this issues added closed?