Open constyn opened 9 months ago
Bump, it is happening quite often for clients, we tried to reproduce among devs, but no luck so far.
May it be connected to:
https://github.com/wojtekmaj/react-pdf/releases/tag/v7.4.0 Font conversion and substitution improvements
?
PS i found same issue that was closed before : https://github.com/wojtekmaj/react-pdf/issues/1010
I don't think that's the same issue though. In #1010 you could see that the text React-PDF was trying to render is more or less accurate, while OP's screenshot shows every single character being wrong.
I think client's graphics card is the key to reproducing this issue.
[for my customers it is happening for either whole page or some texts]
I have small update on this topic. We did debugging session with affected customer and it seems issue is connected with text layer, grabled text is displayed properly while selecting it 🤔 (+ when opening with native browser pdf viewer it works well) We tried as well disabling hardware acceleration - did not help
Hardware - specification Nom de l'appareil AMI-LT314 Processeur 11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz 2.80 GHz Mémoire RAM installée 16,0 Go (15,7 Go utilisable) Système d’exploitation 64 bits, processeur x64
Font descriptors for pdf with garbled text
<< /Type /FontDescriptor /Ascent 891 /CapHeight 500 /Descent -216 /Flags 5 /FontBBox 28 0 R /FontName 25 0 R /ItalicAngle 0.000 /StemV 0 /StemH 0 /AvgWidth 401 /FontFile2 29 0 R /Leading 0 /MaxWidth 2614 /MissingWidth 401 /XHeight 0
<< /Type /Font /Subtype /TrueType /Name /9 /BaseFont 25 0 R /FirstChar 33 /LastChar 105 /Widths 24 0 R /FontDescriptor 27 0 R /ToUnicode 26 0 R
(only thing i could notice is that name looks odd)
I am facing the same issue. There are a few users that have complained about this, I was sent a screenshot from a Chrome user with similar looking PDF to the one provided by @constyn
But I am unable to reproduce the issue myself. Does anyone have a way of reproducing this?
React-PDF 7.5.0 React 18.2.0
We were facing the same issue with a PDF we generated ourselves (in a dedicated backend service). It also only happened for a few specific clients. The solution/workaround we found is to embed the non-standard font we used when generating the PDF. We learned on the way that it's actually highly recommended to do so. We also found this comment from the pdfjs library (among others) stating:
Please note that the only way to guarantee that it works correctly is by embedding all fonts in the PDF document.
So, the root cause is likely related to the use of non-embedded custom fonts in the PDF, and the client's system fonts (which would explain why it is difficult to reproduce this issue).
I doubt react-pdf can do anything about this issue. Maybe pdfjs could, but it seems difficult nonetheless.
Hello Team,
I got the solution this problem while using below code line.
You can alternatively disable the textlayer prop in the
Hope it might help many as they are suffering in production issue. Regards & empathy, Sunil Rana
Facing the same issue here. This is new and only happens for windows users however not every user encounters this issue. Fonts used for the pdf is helvetica.
It's hard for to test because I cannot reproduce the issue. It makes me think it has to be something specific to the fonts on the user's computer possibly.
React-pdf v7.1
Anyone has any ideas?
I am getting reports of this issue on Windows in Chrome (for one user experiencing it, it worked fine in Firefox), since we updated from 6.2.2 to 8.0.2 (with it pdfjs from 2.16.105 to 3.11.174). I've been unable to reproduce it on 4 different Windows devices (in addition to our Macs).
I figure it may be a bug with text rendering on a canvas, so I've focussed my debugging efforts on that. The PDF I am testing with (and which a user ran into the issue with) uses Helvetica without embedding it. I also tested the PDF by changing it to use a non-existent font and with an invalid encoding, and neither reproduced the issue.
While I think it's a bug in pdfjs, I fear reporting the issue there is pointless without first updating react-pdf's pdf.js dependency to the latest version (#1774).
Upgrading to 9.0.0 fixed the issue, just struggled a little bit after the upgrade because the worker has to be imported with extension .mjs and not .js (first lines in the upgrade guide, but who reads the doc 😅)
We've been experiencing this. Some clues I've found:
TLDR: It seems like an Adobe product is making temporary fonts on Windows for the purpose of a print job, and they're not always getting cleaned up. Those incomplete fonts then get used when rendering your PDF on screen.
I'm still trying to find a mitigation which will work in all of our environments, and will report back here is and when I find one.
I managed to reproduce this on Windows.
Z@RD450.tmp
from this Firefox bug report : https://bugzilla.mozilla.org/show_bug.cgi?id=1854090.ttf
extension to make drag and drop work in step 3.I found a workaround which works for me, but YMMV. (I only view PDFs which I generated, so I know exactly what they will contain). pdf-js
has a useSystemFonts setting, which defaults to true
in most browsers. Setting it explicitly to false
bypasses the code path which would resolve in this broken font.
You can pass this through in your react-pdf
Document
as follows:
import { Document } from "react-pdf";
const MyComponent = () => {
// It is important to memoise the options to avoid unnecessary re-renders
const options = useMemo( () => {
return { useSystemFonts: false };
}, []);
return <Document
options={options}
...otherProps />;
}
It seems useSystemFonts
false
is not recommended and I fear it will break more for my app which shows all kinds of user PDFs. I updated react-pdf to v9 and will check with users if this fixes the issue for them.
It seems
useSystemFonts
false
is not recommended and I fear it will break more for my app which shows all kinds of user PDFs. I updated react-pdf to v9 and will check with users if this fixes the issue for them.
Hi 👋 - I am the one that posted the link you referend. Yes, the maintainer said useSystemFonts: false
is not recommended. However, it's the only way I have found to reliably prevent this issue where the incorrect font is loaded from the system.
I've been running useSystemFonts: false
in production for a number of months now and it seems to work OK with a variety of PDFs. You need to also supply a standard font url.
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.
Before you start - checklist
Description
When attempting to render a PDF, the text within the PDF is displayed as garbled and unreadable characters.
Steps to reproduce
Load a PDF file through React-PDF Observe the rendered output on the screen.
Expected behavior
The PDF should be rendered with clear, readable text, displaying the content as intended.
Actual behavior
The text in the rendered PDF is garbled with characters and symbols that do not represent the actual content of the document.
Additional information
Environment