In many web applications, there are times when we need to generate and download PDF files on the client-side. However, for the sake of showing a li...
For further actions, you may consider blocking this person and/or reporting abuse
Hi @simonhessel ,
Thank you for this great article and I have a few questions about the rendering process.
When I enter some text into the document the PDF blinks and this is due to the rendering process i guess and this gives a bad user experience. is there a way to make the document not to blink ?
Thank you.
Hi,
Thank you!
You can prevent the flashing during PDF rendering by replacing the default browser renderer (e.g., iframe) with a solution like react-pdf, which uses canvas and
pdfjsto render the file. It includes anonLoadSuccessprop that calls a function once rendering is complete.For a smoother experience, you can display the previous PDF version until the new one is fully pre-rendered. You can see an example in the official react-pdf REPL, and here’s a relevant code snippet from the repo.
Best,
Simon
I had some issues after upgrading some packages in our project. Thanktfully, the example repo is also up to date (worker shim)!! Nice work and thank you.
i implemented this but when i click the download button the ui is freezing, can you tell me why?
Sorry no idea, do you get this error with the above demo?
I think the issue is worker is being used for rendering the pdf into the browser but in case of download it is working on the main thread so it is giving issue
if someone can figure out how to implement this on next would be awesome, no succes from my side yet
@davidflr1 please find the same example using next here github.com/shkreios/nextjs-pdf-ren...
Nice article ! If i implement this approach, will my bundle chunk became smaller ? Now now i have 1.6 mb size
Sadly, no, since Vite triggers a second Rollup build when bundling code for a worker. See this issue for more info.
This may be different when using another bundler.
hey Simon, i am facing an error saying - DOMException: Failed to execute 'postMessage' on 'Worker': Symbol(react.element) could not be cloned. How to resolve this? Thank you
@bdamor5 to me this sounds like that react is not available inside the webworker. Did you use the example setup from the blogpost?
If not make sure that whatever bundler you are using that react is part of both the main & worker bundle.
I am getting error that window is not defined. How I can fix this?
it seems the issue is with workerShim.js as it helps to make the window and document accessible