file-saver 적용

개인 블로그 이력서 페이지에서 이력서를 pdf로 다운 받을 수 있는 기능을 추가 하기 위해 file-saver라는 라이브러리를 사용했다. (지금은 비활성화시킴 )

 

file-saver

npm

file-saver

 

설치

npm i file-saver

 

다운로드 방법

• fetch("/resume.pdf") : 서버에서 이력서 PDF 파일을 가져오기 위한 fetch 요청을 보낸다. 파일의 경로는 public에 저장된 " /resume.pdf " 로 지정한다.
• .then((response) => {...}) : 응답이 정상적인지 확인하고, 정상적이면 파일 데이터를 blob 형식으로 추출한다.
• .then((blob) => {...}) : blob 형식으로 추출된 파일 데이터를 saveAs 함수를 사용하여 사용자의 컴퓨터로 다운로드 하며 두 번째 인자로는 다운로드 될 파일의 이름을 지정한다.
• .catch((error) => {...}) : 요청이 실패하거나 에러가 발생한 경우 콘솔에 에러 메시지를 출력한다.

  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>
      {/* ... */}
    </>
  );
}

 

결과