Display your Resumé PDF on your Website

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-rea…


This content originally appeared on DEV Community and was authored by binh ngo

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. Feel free to message me with any questions!


This content originally appeared on DEV Community and was authored by binh ngo


Print Share Comment Cite Upload Translate Updates
APA

binh ngo | Sciencx (2023-04-13T01:00:55+00:00) Display your Resumé PDF on your Website. Retrieved from https://www.scien.cx/2023/04/13/display-your-resume-pdf-on-your-website/

MLA
" » Display your Resumé PDF on your Website." binh ngo | Sciencx - Thursday April 13, 2023, https://www.scien.cx/2023/04/13/display-your-resume-pdf-on-your-website/
HARVARD
binh ngo | Sciencx Thursday April 13, 2023 » Display your Resumé PDF on your Website., viewed ,<https://www.scien.cx/2023/04/13/display-your-resume-pdf-on-your-website/>
VANCOUVER
binh ngo | Sciencx - » Display your Resumé PDF on your Website. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2023/04/13/display-your-resume-pdf-on-your-website/
CHICAGO
" » Display your Resumé PDF on your Website." binh ngo | Sciencx - Accessed . https://www.scien.cx/2023/04/13/display-your-resume-pdf-on-your-website/
IEEE
" » Display your Resumé PDF on your Website." binh ngo | Sciencx [Online]. Available: https://www.scien.cx/2023/04/13/display-your-resume-pdf-on-your-website/. [Accessed: ]
rf:citation
» Display your Resumé PDF on your Website | binh ngo | Sciencx | https://www.scien.cx/2023/04/13/display-your-resume-pdf-on-your-website/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts