topic★★★★★난이도

jsPDF — PDF 생성

브라우저/Node.js에서 PDF를 동적으로 생성하는 라이브러리. 텍스트, 이미지, 표 삽입 가능.

#jsPDF#PDF#문서생성#브라우저

왜 배우는가

견적서, 이력서, 리포트 — 브라우저에서 PDF 만들기가 가능하다. 서버 없이 클라이언트에서 직접 PDF를 생성해 다운로드시킬 수 있어, 별도 인프라가 필요 없다.

jsPDF는 브라우저에서 PDF 만들기 도구다. 서버에 의존하지 않고 클라이언트 JavaScript만으로 PDF를 생성한다. 텍스트, 이미지, 도형을 넣을 수 있고, `jspdf-autotable` 플러그인을 추가하면 엑셀 스타일의 표도 가능하다.

용도	설명
견적서/인보이스	주문 내역을 PDF로 출력
이력서	입력 폼 → PDF 변환
리포트	차트 캡처 + 표 데이터 조합
수료증	이름·날짜를 동적으로 삽입

javascript

// npm install jspdf jspdf-autotable
import { jsPDF } from "jspdf";
import "jspdf-autotable";

const doc = new jsPDF();
doc.setFontSize(20);
doc.text("월간 리포트", 105, 20, { align: "center" });

doc.autoTable({
  head: [["항목", "금액", "비고"]],
  body: [
    ["서버 비용", "50,000원", "AWS"],
    ["도메인", "15,000원", "1년"],
  ],
  startY: 40,
});

doc.save("report.pdf");

`new jsPDF()`로 문서를 만들고, `text()`로 글자, `autoTable()`로 표를 삽입한 뒤 `save()`로 다운로드한다. 한글 폰트는 별도 등록이 필요하다.

Claude Code 팁: "jsPDF로 주문 내역을 표로 정리한 견적서 PDF 만들어줘"라고 하면 레이아웃, 로고 삽입, 합계 계산까지 포함된 코드를 생성한다. 한글 폰트 설정 코드도 함께 생성 가능.