no interactive pdf because your pdf are based on images, not actual searchable text in pdf, no clickable links.huge PDF size: generating documentation for hundreds of pages is not practical as you end up with pdf size that no sane user will want to download.It does not scale : one instance of pdf generating will use at least 2GO and more.The author made some disclaimers about his solution not being production ready. Let me expand on why i suggest anyone to use react-pdf instead of react+pupppeteer. I said you can use custom components, but not use ones that target the DOM. Let's start of by creating a new Next.js project by running: Basic understanding of Next.js and their API routes is recommended. Make sure you have NodeJS installed, I use version 16. Over here you will find the repo containing the code and the resulting PDF Whilst this approach is fine if you're designing a resume with HTML and CSS, It's going to become very tedious if you are building a tool where end users need to export PDFs like invoices.įollowing this guide, you will learn how to turn your React, CSS pages into PDFs together with Puppeteer! The downside to this method is that the end user would have to manually open a page, hit print and "Print to PDF" every time you want to save it. Problem is is that these image PDFs don't scale when zooming in neither can you copy text, click links etc. I don't know about you, but I rather not build my resume this way.Īnother very common trick is to to turn webpages into images, and in turn convert those into PDFs. There's creating PDFs using libraries like pdfkit or PDF-LIB which looks like this:Įnter fullscreen mode Exit fullscreen mode ![]() The web resume I built and export using this technique:ĭuring my initial search to generate PDFs, you quickly find out it's a lot harder than you might think. Oh and why Next.js? The same concept works for NodeJS and CRA, but Next.js has become my go-to boilerplate for React apps as it provides so much out of the box. Knowing that React or Next.js is probably a bit overkill for just building a resume, this technique can come in handy if you for example, would have to generate invoices inside your already existing applictaion. Honestly, I hate making my resume with Word or Pages, constantly fighting spacing etc. If there's enough interest, I can make a follow-up post.Ī month ago, I rebuild my resume with Next.js and Tailwindcss. There's several things we can implement to make this more production proof. Hey everyone, let me preface this by saying: This is NOT a production ready implementation.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |