Next.js Discord

Discord Forum

Live preview of pdf in Next.js

Unanswered
Yellow croaker posted this in #help-forum
Open in Discord
Yellow croakerOP
Hello i'm building a resume Builder application, and i need a functionality to have live preview of the user resume showed for the user.

User uses forms to fill their information, and then that information should be displayed on the live preview. User should be also be able to download the resume from click of a button.

What i have been checking out:
- Using React-PDF to create the resume and the display it. https://react-pdf.org/repl Here is example from the live preview that React-pdf has on it playground. Here source code for it: https://github.com/diegomura/react-pdf-site/tree/master/src/components/Repl

- Using markdown to create and display the resume

- Using iFrame to to display the PDF for user.

- Using html2Canva with jspdf, a bit unclear how this is beneficial instead of using React-PDF?

What would be best options from these, or is there something else that im missing? Basically the Live preview should be almost 1:1 with the actual downloadable PDF.

2 Replies

Yellow croakerOP
There is also option for puppeteer maybe, but i think on this, i should Focus on client side
Yellow croakerOP
https://github.com/wojtekmaj/react-pdf/discussions/887

Found this, and went throught The code, and wondering should i just implement pdfViewer like functionality?