PDF text not displayed correctly when embedded in popup window using React Portal

[lifan0127]

Before you start - checklist

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

Description

My use cases involves using React Portal to display PDF in a new popup window, more or less following this blog post: https://medium.com/hackernoon/using-a-react-16-portal-to-do-something-cool-2a2d627b0202

However, text will not display correctly in the popup window, when the same PDF is displayed properly in the main browser window. This seems to happen for all my PDF files.

Steps to reproduce

Please see the sandbox https://codesandbox.io/s/objective-noether-7nplp?file=/src/App.js

Note that you need to choose "Open in New Window" to avoid the iframe security error.

Environment

• Browser (if applicable): Chrome, Firefox
• React-PDF version [e.g. 3.0.4]: 4.1.0
• React version [e.g. 16.3.0]: 16.13.1
• Webpack version (if applicable) [e.g. 4.16.2]:

[lifan0127]

I have realized that if I set pdfjs option disableFontFace: true, the sample PDF will render correctly in the popup window. However some other PDFs will fail with text completely missing, for example:

Note that all the PDFs are rendered correctly if the react-pdf component is in the main window with disableFontFace: false.

Based on some potentially related discussions:

mozilla/pdf.js#4244

mozilla/pdf.js#11955 (very helpful)

and the definition of the disableFontFace parameter:

By default fonts are converted to OpenType fonts and loaded via font face rules. 
If disabled, fonts will be rendered using a built-in font renderer that constructs the glyphs 
with primitive path commands. The default value is `false`

I suspect my issue is caused by a font face loading problem in the popup window. But I don't know this topic well enough to further troubleshoot.

[wojtekmaj]

Yeah, since fonts are added to the document that loads React-PDF, you would need to load React-PDF in popup. Otherwise the popup doesn't have access to the fonts, and consequently displays gibberish.

Not sure how to achieve this using this specific library, so I'm going to leave this open for the community to help.

[Sharcoux]

Notice that we have the exact same issue in electron

[github-actions]

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.

[wojtekmaj]

Ok, I've made a promising discovery:

There is options prop in <Document /> using which you can pass some options to PDF.js:

react-pdf/README.md

Line 277 in 99a0fcf

| options | An object in which additional parameters to be passed to PDF.js can be defined. For a full list of possible parameters, check [PDF.js documentation on DocumentInitParameters](https://mozilla.github.io/pdf.js/api/draft/module-pdfjsLib.html#~DocumentInitParameters). | n/a | `{ cMapUrl: 'cmaps/', cMapPacked: true }` |

It looks like DocumentInitParameters has something called ownerDocument:
https://github.com/mozilla/pdf.js/blob/403baa7bbab555c2a84e6787bc3dc2ab49724467/src/display/api.js#L200-L202

So if you could pass a reference to popup window using this option like so:

// Note: make sure to memoize this object
const options = {
  ownerDocument: popupRef.document,
};

// Render this somewhere in popupRef document
<Document options={options} file={…} />

then fonts should render properly.

[wojtekmaj]

Pardon my French but fuck yes! Here's a working example:

https://codesandbox.io/s/react-pdf-popup-vco8p

Note: This should work with React-PDF 5.3.0 and later. React-PDF 4.1.0 used by OP does not support this option.

[lifan0127]

Thank you so much for your persistent effort!! It is great to know this problem has been addressed and learned a lot from your solution!