Nuxt3에서 HTML 내용 일부를 PDF 파일로 추출하는 방법

📌 기능구현에 사용된 패키지 : “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>