Intro
I'm currently working on my portfolio site and want to incorporate a PDF version of my resume. To do so I made a copy of my resume, convert it into a PDF and then dragged it into the React components folder of my project. I tried several tutorials to try to simply get a PDF to render on-screen and finally came across a solution which I am here to share with you today.
If you're looking to generate a PDF document in React, look no further than React-PDF.js and Logan Bittner's detailed blog post on How to Build a PDF Viewer with React and PDF.js. I was then able to take what I learned from this tutorial and incorporate it into my personal project.
https://www.pdftron.com/blog/react/how-to-build-a-react-pdf-viewer/
What is PDF.js?
It is a JavaScript library that displays Portable Document Format(PDF) files through HTML5 Canvas. It is a general-purpose, web standards-based platform for parsing and rendering PDFs and can work as a part of a website or a browser.
Outline
These guidelines are as stated by Logan's blog
*If starting a new project
- Install Dependencies*
- Create Project*
- Setup Project
- Define the Backend
- Invoke pdf.js
- Implementation of Webviewer
Diving In
If you are starting a new project, make sure to install your dependencies before moving on and starting your local server. Next, we move on to the project setup. The blog post guides you through the setup of your root file and the creation of your first component. As I progressed, I incorporated this new component in my Linked routes, alongside my other specified pages so that I could direct my user to this PDF viewer. Functionality gets added as we define our backend and we are able to pass a class to implement these functions to the component. By creating separate backend classes to assist the component to render the PDF we make our code more reusable and adaptable for future changes. This is the alternative I was looking for to hard-coding my resume. To implement pdf.js, we need to download the library from https://mozilla.github.io/pdf.js/getting_started/#download and derive contents inside our public folder. If you are confused about how your files should be structured at this point, you can refer to Logan's:
and mine:
In order to add features such as page manipulation or real-time collaboration, we implement the Webviewer library. Once again, download the contents from https://www.pdftron.com/documentation/web/get-started/manually/ and extract them to your public file (as seen in my file structure above). This isn't necessary and your PDF will render without it, but it'll make all the difference aesthetically and user-wise. This is where I decided to stop as I did not want a PDF seal on my resume and I did not need the extended functionality of the extended backends that Logan goes over at the end of his article.
Reflection
Incorporating the code from the tutorial into my pre-existing project was super easy. Finding a tutorial that actually did what it set out to do was by far the hardest part.
By creating a simple route:
I was able to create a separate route for the PDF that I could Link to and that could be reached through the click of an icon.
Good luck, and have fun!
Oldest comments (4)
Exactly what I needed! Thanks for sharing ! :D
I've been wanting to do this in my portfolio as well, thank you!
Hello Sofia,
Thank you for this article. It helped me setup the viewer correctly but I do have one question. How can I add a download button to the navigation just to ensure that someone can download it if they want to.
Thanks for sharing.
Use the website for Adding Pages to Pdf
Add Pages to Pdf