Blank Page while printing after a certain period of time

[PrabeenGautam]

I'm using React-to-Print in my project to allow users to print data from a modal. I've implemented a feature where users can preview the print data in the modal before printing. However, I've noticed an issue where, after printing, if the modal is left open for some time without interacting with it, and user the clicked on print button, the print modal appears empty as shown in the attached image. This behavior occurs even though the data was initially visible when the modal was opened.

Expected Behavior: The print data should remain visible in the print modal even after some time of inactivity.

Actual Behavior: After some time of inactivity, the print modal appears empty, as shown in the attached image.

What it should look like

[MatthewHerbst]

Hello. Could you share a working example of your code please? It's not really possible to debug with screenshots. I'd be curious to know how your modal works though. And just so we're on the same page, you're saying the first print works, but subsequent, delayed prints do not work, or even the first print does not work if delayed long enough?

[PrabeenGautam]

Since, its a company code, i can not provide the exact working example. Here is the methods i have followed

1. Use AntD modal
2. fetch data required for modal when initial print icon is clicked, it will first fetch the data, then only open a modal. The fetch data is stored in state.

Then after modal open and user can print.

If possible, i will try to create a replica and send a link

[MatthewHerbst]

A replica would be great, thank you!

[SaranyaPonnusamy]

Facing same issue

We debugged and found that the preview popup opened before loading the following fonts. Consequently, we were unable to view the content. Once the fonts were loaded properly, the contents appeared as expected.

open-sans-v18-600.woff2 open-sans-v18-regular.woff2 open-sans-v18-700.woff2

[MatthewHerbst]

@SaranyaPonnusamy could you share the method you used to ensure the fonts were loaded? Would be useful for others to see I believe. Thanks in advance!

[SaranyaPonnusamy]

We don't have any method currently. We verified by adding a timeout so that fonts can be loaded before the preview is opened.

onBeforePrint={() => new Promise(resolve => {
  setTimeout(() => resolve(""), 1000)
})}

is there any other way to resolve this issue ?

[MatthewHerbst]

@SaranyaPonnusamy have you tried using the fonts prop? It lets you inform react-to-print about fonts it should ensure are loaded before trying to print

[SaranyaPonnusamy]

I tried below code. Its not working

fonts={[{family: "Open Sans", source:""}]}

[MatthewHerbst]

@SaranyaPonnusamy what does the css where you apply the fonts look like, and how does it get included onto your page?