Nuxt3로 만든 화면에서 특정 영역만 PDF 파일로 내려받게 해야 했다. 페이지 전체를 인쇄하는 게 아니라, 화면 안의 한 블록만 잘라서 파일로 저장하는 기능이다.

여기에는 html2pdf.js 패키지를 썼다. 이 글에서는 설치부터 다운로드 버튼, 옵션 구성까지 정리.

기능구현에 사용된 패키지 : “html2pdf”

패키지 설치

npm install --save html2pdf.js

위 명령을 입력하면 package.json 파일의 dependencies 안에 "html2pdf.js": "^0.10.1", 한줄 추가된 것을 확인할 수 있다.

HTML to PDF Code

  • PDF로 다운로드하고자 하는 특정 HTML 요소의 id를 html-to-pdf 라고 가정
// PDF 다운로드 버튼 추가 예시
<button type="button" @click="generatePdf"> PDF Download</button>
  • PDF 다운로드 기능 js
<script setup lang="ts">
import html2pdf from "html2pdf.js"

const generatePdf = () => {
  let element = document.getElementById('html-to-pdf');
  let opt = {
    margin:       0,
    filename:     'myfile.pdf',
    image:        { type: 'jpeg', quality: 0.98 },
    html2canvas:  { scale: 2 },
    jsPDF:        { unit: 'in', format: 'letter', orientation: 'portrait' }
  };

  // New Promise-based usage:
  html2pdf().set(opt).from(element).save();
}
</script>