How do I fix garbled text in my react-pdf viewer?
I have created a pdf viewer using react-pdf. When I display certain pdfs, the text is choppy and unreadable. I have tried zooming in and out of the document and it is choppy in different ways at different scales. Sometimes the text even looks okay at a certain scale after zooming out and then zooming back in.
(Sample at 1.5 scale)
(Sample at 1.6 scale)
At first, I thought it might be an issue with react-pdf, but I saw that react-pdf is basically a wrapper around PDF.js. I found that I can replicate the issue in the PDF.js demo page.
Unfortunately, I'm working with a pdf that contains identifying information, so I can't share the full pdf or full screenshot. I'll include as much as I can figure out to share.
What I have tried
- My initial thought was that maybe the component was rendering small initially and then had issues scaling up. So I made the initial size really large, but that didn't fix it.
- I made sure that standard fonts were included following the instructions on the react-pdf home page
- I tried using pdf repair tools online to maybe fix the pdf itself. That didn't help.
- I tried changing the
renderModeto'svg'as detailed in the Document api documentation. This was the most helpful fix, as it does render the text correctly, but it then makes it so the images on the pdf don't load.
Thanks for your help/suggestions.
If I can find a way to edit the pdf to not have sensitive information, I'll try to find a place to make it available for testing. I apologize that I cannot provide that at this time. I know it's difficult to give advice when you can't replicate it yourself. I'll work on that.
This issue has been finally fixed in the latest version of react-pdf library. Check here: https://github.com/wojtekmaj/react-pdf/releases/tag/v6.2.2
- Download file or Open if file type is PDF
- A4 Template CSS: can't extend the div's height through the entire A4-page
- Set Paper Source of PDF page in ASP.NET Web Form Application
- Error using magick R to import PDF
- Are PDF headers all the same regardless of version
- Call to undefined method Dompdf\\FrameDecorator\\Page::add_line()
- Any Way to Reduce File Size Using wkhtmltopdf?
- DomPDF uses custom font on local server, but not in production
- Rendering PDF Jetpack Compose
- ICEpdf: PDF Printing corrupted second page
- Adding external images to PDF using iText
- Splitting PDF with PyPDF2 in Lambda function
- how do you open a PDF at a specific page from the command line? (OSX or Linux)
- Error while signing multiple signature fields using itext c#
- Using R Quarto to create PDF documents, how can I center code chunk output and add a background color?
- Importing a scatter plot from PDF into R
- Convert a PDF file to image
- Process.Start(...) Suddenly Fails when Called by ASP.NET MVC 5 Running in IIS on Windows 10 and Windows Server 2019
- pdf2json Page Unit: What is it?
- Correct format of ICC-based /ColorSpace in PDF
- Displaying a PDF in a WPF Application Not Working - WebBrowser or Adobe Control
- Save cropped pdf image from R imagemagick to a new pdf
- Generate PDF with LUA
- How to convert PDF files to images using RMagick and Ruby
- ImageMagick convert pdf with multiple pages to high quality PNG
- Is there a field in which PDF files specify their encoding?
- Display PDF file which isn't stored on www folder inside R shiny app
- OnlyOffice Docs: The DocumentEditor is not saving changes in Next.js
- Mass saving PDFs (with unique ID at the start of the PDF) to folders that have unique ID at the end
- Watermarking with PDFBox