How to Display PDF in React or Vuejs Application using PDF.js

I recently encountered the challenge of displaying my resume on my portfolio page in a way that was easy to access and share.

I wanted to avoid the inconvenience of forcing prospective recruiters to download a PDF and instead offer a seamless and instant viewing experience.

I initially considered converting my resume to an image and using the <img /> tag or embedding it using the HTML <iframe /> or <embed /> tag. However, I quickly realized that these options were not optimal due to compatibility issues with different browsers and devices.

After researching different solutions, I discovered that the best way to display PDFs on the web is through the use of PDF.js, a package developed by Mozilla.

To demonstrate this solution, I chose to use React and Vue.js along with the <iframe /> tag.

In this tutorial, I'll guide you through the process of displaying your PDF resume or CV in a web application using React and Vue.js with the help of PDF.js and .

By the end of this tutorial, you'll be able to easily embed your resume on a page that can be accessed at domain.com/resume, making it readily available to anyone who wants to view it.

Assuming that you have your project up and running, let's dive straight into the process.

Step 1: Prepare Your Resume

Before we get started, make sure you have a resume to display. If you don't have one, you can use online tools like Canva or any resume builder of your choice to create one.

Ensure you compress your resume PDF to the smallest size as possible. The bigger the file size, the slower the page will load and that is very likely to turn off the Recruiter off. Use online pdf compression services, they're free.

Once you have your resume ready, download it and upload it to the public folder of your project. The advantage of placing it in the public folder is that it can be accessed from anywhere in your project by simply typing /resume-name.pdf.

Step 2: Obtain the PDF.js Package

To display PDFs without any browser compatibility issues, we'll use the free PDF.js package developed by Mozilla.

You can get this package in two ways: by using a CDN or by downloading the zip file. In this tutorial, we'll use the second method.

Click here to download the PDF.js package in .zip format and extract it after downloading.

Copy the extracted folder and paste it in the /public folder of your project. Once you've done that, your folder structure should look like this:

NOTE: Don't rename the pdf.js folder name.

If you've successfully completed this step, we're almost done.

Step 3: Write the Code

Since we're still using the <iframe /> tag, we don't need to write any complex code. Create a component and name it something like FileViewer.jsx for React or FileViewer.vue for Vue.

For React, here is the full code for the component:

export const FileViewer = () => {

  const RESUME_PDF = "/your-resume.pdf" // replace with actual resume name

  return (
    <div className="file-viewer">
      <iframe
        title="PDF"
        src={`/pdfjs-2.5.207-es5-dist/web/viewer.html?file=${RESUME_PDF}`}
        width="100%"
        height="1000px" 
      ></iframe>
    </div>
  );
}

And you’re done.

For vue.js, here is the full code:

<template>
  <div>
    <iframe title="PDF" width="100%" height="1000px" :src="`/pdfjs-3.4.120-dist/web/viewer.html?file=${documentUrl}`"></iframe>
  </div>
</template>

<script>
export default {
  name: "MyResume",
  data() {
    return {
      documentUrl: "/your-resume.pdf"
    }
  }
}
</script>

In this component, we've used PDF.js to enhance the compatibility of the default <iframe /> HTML tag. This ensures that your PDF document will be displayed perfectly on all devices and browsers.

If you find that the default zoom size of your PDF is too big or too small, you can easily adjust it by adding the &zoomparameter to your document URL. For example, to zoom in to 150%, you would add &zoom=150 to the end of your URL.

Once you've added your PDF document, you can customize the way it is displayed even further.

Here are some additional options in PDF.js

- Setting a default page:
You can set the default page to display by adding #page=<page-number> to the end of the src attribute. For example, to display the third page by default, you can set the src attribute to:

src="`/pdfjs-3.4.120-dist/web/viewer.html?file=${documentUrl}&zoom=150#page=3`"

- Page navigation:

You can add a page navigation control by setting the navpanes query parameter to 1. For example, to add the page navigation control, you can set the src attribute to:

src="`/pdfjs-3.4.120-dist/web/viewer.html?file=${documentUrl}&zoom=150&navpanes=1`"

- Sidebar visibility:

You can hide or show the sidebar by setting the sidebar query parameter to 1 (show) or 0 (hide). For example, to hide the sidebar, you can set the src attribute to:

src="`/pdfjs-3.4.120-dist/web/viewer.html?file=${documentUrl}&zoom=150&sidebar=0`"

- Toolbar visibility:
You can hide or show the toolbar by setting the toolbar query parameter to 1 (show) or 0 (hide). For example, to hide the toolbar, you can set the src attribute to:

src="`/pdfjs-3.4.120-dist/web/viewer.html?file=${documentUrl}&zoom=150&toolbar=0`"

Once you've set up your PDF display, make sure to test your application on multiple devices to ensure that it is working properly.

Additionally, if you're using Vue.js, you may want to learn about page navigation to help you navigate between different views in your application, Here is a guide.

With PDF.js, you can easily display PDF documents in your web application and customize the display to meet your needs.

Conclusion: Displaying PDF in Web Application with PDF.js

In this tutorial, we have learned how to display PDF files in a web application using PDF.js. With PDF.js, we can extend the compatibility of the default <iframe /> tag and ensure that our PDF files are displayed perfectly on every device regardless of the browser.

We have also seen how to adjust the default zoom size of the displayed PDF and customize other features such as setting a default page, adding page navigation control, and hiding or showing the sidebar and toolbar.

By following the steps outlined in this tutorial, you can easily display your PDF files on your web application, making it easy for prospective recruiters or visitors to view your resume or other important documents without having to download them.