Display your Resumé PDF on your Website
Tags: beginners, react, webdev, javascript
Published: 2023-04-13 01:00:55

Rather than having a button or a link that displays your resumé in another tab, follow these steps to display it on your viewport.

## Setup

I'm assuming you have your React app initialized already, but just in case you don't,

```
npx create-react-app <pdf-renderer>
npm i react-bootstrap react-pdf
```
- `react-bootstrap` is an easy-to-use styling framework that makes designing your website a breeze.

- `react-pdf` is what will display existing pdf's.

## Imports

```
import React, { useState, useEffect } from "react";
import { Container, Row, Button } from "react-bootstrap";
import pdf from "../../assets/coding-resume.pdf";
import { Document, Page, pdfjs } from "react-pdf";
import "react-pdf/dist/esm/Page/TextLayer.css";
import "react-pdf/dist/esm/Page/AnnotationLayer.css";

pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.min.js`;

```
- `react-bootstrap` will take care of the design of your webpage and will create the button that will allow users to download your resumé.

- State hooks will be used to dynamically display your resumé on whatever screen people choose to view it on.

- import your "pdf" with the correct pathing to it.

- `react-pdf` provides us with three imports:

  - Document - class that retrieves our resumé by a link that we provide.

  - Page - class that allows you to choose how many pages you want to display and how to scale the image based on screen size.

  - pdfjs - we use this to retrieve the correct version number of the pdf reader from the cdnjs library.

## Code

```
const resumeLink =
  "https://raw.githubusercontent.com/github-name/pdf-renderer/main/src/assets/resume.pdf";

  function Resume() {
  const [width, setWidth] = useState(1200);

  useEffect(() => {
// default width is 1200px, but this hook sets the width of the resume to be the inner width of whatever screen the user is using
    setWidth(window.innerWidth);
  }, []);

  return (
      <Container fluid className="resume-section">
          <Button
            variant="primary"
            href={pdf}
            target="_blank"
            style={{ maxWidth: "250px" }}
          >
            &nbsp;Download Resume
          </Button>
        <Row className="resume">
{*/ this component takes the link provided above and renders it on your page /*}
          <Document file={resumeLink} className="d-flex justify-content-center">
  {* /if width is greater than 786px, scale by 1.7x if not, 0.6x /*}
            <Page pageNumber={1} scale={width > 786 ? 1.7 : 0.6} />
          </Document>
        </Row>
      </Container>
  );
}
export default Resume;
```

- resumeLink - this is the link that you can retrieve by going into your repo and locating your resumé pdf.

If your URL is in this format,

- github.com/github-name/pdf-renderer/blob/ma..

  - Replace github -> raw.githubusercontent and remove /blob.

## Conclusion
That wraps it up! If you have any questions or if you want to view code that works on a live website, check out my [portfolio](https://github.com/binh-ngo/react-portfolio/tree/main/src/components/Resume). Feel free to message me with any questions!