[React] html2canvas와 jsPDF를 사용하여 PDF 생성

안녕하세요, hr0513입니다! 🥰

 

오늘은 html2canvas와 jsPDF 라이브러리를 사용하여

HTML 콘텐츠를 PDF 변환하는 방법에 대해 소개해 드릴게요! ✨

---

1. 패키지 설치

html2canvas와 jsPDF 패키지를 설치해 주세요.

npm install html2canvas jspdf

---

2. HTML 콘텐츠 캡처하기

html2canvas를 사용하면 특정 HTML 요소를 캡처해서 이미지로 변환할 수 있어요.

이렇게 만들어진 이미지를 jsPDF로 PDF로 변환하고 저장하는 코드예요!

"use client";

import React from "react";
import html2canvas from "html2canvas";
import jsPDF from "jspdf";

const Page = () => {
  const captureAndDownloadPDF = () => {
    const element = document.getElementById("contentToCapture");

    // HTML 요소를 캡처하여 canvas로 변환
    html2canvas(element).then((canvas) => {
      // canvas를 이미지로 변환
      const imgData = canvas.toDataURL("image/png");

      // jsPDF 인스턴스 생성 (가로 모드)
      const doc = new jsPDF("landscape");

      // 이미지를 PDF에 추가
      doc.addImage(imgData, "PNG", 10, 10, 260, 180); // 좌표와 크기 조정 가능

      // PDF 파일 다운로드
      doc.save("download.pdf");
    });
  };

  return (
    <div>
      <div
        id="contentToCapture"
        style={{
          margin: "30px",
          width: "300px",
          height: "200px",
          backgroundColor: "#f0f0f0",
          padding: "10px",
        }}
      >
        <h2>PDF로 저장할 콘텐츠</h2>
        <p>이 영역의 내용을 PDF로 저장할 수 있습니다.</p>
      </div>

      <button
        type="button"
        style={{
          marginLeft: "30px",
        }}
        onClick={captureAndDownloadPDF}
      >
        PDF로 저장
      </button>
    </div>
  );
};

export default Page;

 

- html2canvas

HTML 요소를 캡처하여 canvas로 변환하는 기능을 제공해요.

여기서는 element를 지정하여 캡처하고 캡처한 내용을 이미지 데이터로 변환합니다

 

- jsPDF

JavaScript에서 PDF 파일을 생성하는 데 사용돼요.

여기서 "landscape" 옵션으로 가로 모드 PDF를 생성했습니다.

addImage 메서드를 사용해 이미지를 PDF에 추가하고 save 메서드로 PDF 파일을 다운로드합니다.

---

3. 실행 화면

---

이런 라이브러리가 있다니 놀랍죠ㅇㅁㅇ!! 재미있으니 여러분도 사용해 보세요 🤗