개인 블로그 이력서 페이지에서 이력서를 pdf로 다운 받을 수 있는 기능을 추가 하기 위해 file-saver라는 라이브러리를 사용했다.

file-saver

npm

https://www.npmjs.com/package/file-saver

설치

npm i file-saver

다운로드 방법

  const downloadPDF = () => {
    fetch("/resume.pdf") 
      .then((response) => {
        if (!response.ok) {
          throw new Error("Network response was not ok");
        }
        return response.blob(); // 가져온 파일의 blob 데이터 반환
      })
      .then((blob) => {
        saveAs(blob, "박민선_프론트엔드_이력서.pdf");
      .catch((error) => {
        console.error(error); 
      });
  };

전체 코드

import { saveAs } from "file-saver";

export default function Resume() {
	const downloadPDF = () => {
    fetch("/resume.pdf") // PDF 파일의 경로
      .then((response) => {
        if (!response.ok) {
          throw new Error("Network response was not ok");
        }
        return response.blob();
      })
      .then((blob) => {
        saveAs(blob, "박민선_프론트엔드_이력서.pdf"); // 다운로드될 파일명
      })
      .catch((error) => {
        console.error(error);
      });
  };
  
   return (
    <>
      //...
	    <div
        onClick={downloadPDF}
        className="my-10 w-[150px] move-btn cursor-pointer"
        >
        이력서 다운로드
      </div>
      //....
    </>
   )
}

결과