[JavaScript] PDF다운로드 기능 구현하기 ( html2pdf )

html2pdf는 html2canvas 와 jsPDF를 사용하여 웹페이지나 요소를 PDF로 변환할 수 있다.

html2Pdf를 활용하여 PDF 다운로드 기능을 구현해 보자!

1. 필요한 스크립트

//기본세팅	
<script src="https://unpkg.com/jspdf@latest/dist/jspdf.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jspdf-html2canvas@latest/dist/jspdf-html2canvas.min.js"></script>

2. html과 css

.page 엘리먼트를 a4용지 크기로 설정해서 총 4장의 pdf가 출력되면 된다!

<head>
  <style>
    .page {
      width: 210mm;
      height: 297mm;
      background: salmon;
      margin-bottom: 10px;
      box-sizing: border-box;
    }
  </style>
</head>
<body>
  <button onclick="FnPDF()">pdf 다운로드</button>
  <div class="page">1</div>
  <div class="page">2</div>
  <div class="page">3</div>
  <div class="page">4</div>
</body>

3. PDF 다운로드 스크립트

function FnPDF() {
  const pages = document.querySelectorAll('.page'); //.page 전부 찾기
  html2PDF(pages, {
    jsPDF: { 
      format: 'a4',//pdf사이즈 
    },
    html2canvas: {
      scrollX: 0,
      scrollY: -window.scrollY,
      //위 두줄은 스크롤로 인한 빈페이지 출력을 막는다.
    },
    imageType: 'image/jpeg', //이미지 형식
    filename: "my_pdf.pdf", //저장되는 파일 이름
    margin: { //상하좌우 여백
      top: 5,
      right: 5,
      bottom: 5,
      left: 5,
    },
  });
}

이렇게 간단하게 pdf파일을 출력할 수 있다.

❗ 문제점

저장되는 파일 이름이 변경이 안된다. 이유는 아직 잘 모르겠다… 이유를 찾게 되면 추가할 예정이다!

혹시 문제점을 알고 계시다면 댓글 남겨주세요😭

다음편 보러가기

https://yelm-ing.tistory.com/33

[JavaScript] PDF다운로드 기능 구현하기 (html2pdf) 오류 해결!

지난번 html2pdf를 사용하여 PDF다운로드 기능을 만들어봤다. 그런데 파일명이 변경되지 않는 오류가 생겼는데 이유를 알게 되어 기록하기로 한다! 다양한 예제들을 찾아보니 출력할 엘리먼트를

yelm-ing.tistory.com

참고

https://www.npmjs.com/package/html2pdf.js/v/0.9.0

html2pdf.js

Client-side HTML-to-PDF rendering using pure JS. Latest version: 0.10.1, last published: 2 years ago. Start using html2pdf.js in your project by running `npm i html2pdf.js`. There are 88 other projects in the npm registry using html2pdf.js.

www.npmjs.com

https://rawgit.com/MrRio/jsPDF/master/docs/jsPDF.html

jsPDF - Documentation

For compatibility reasons jsPDF offers two API modes which differ in the way they convert between the the usual screen coordinates and the PDF coordinate system. "compat": Offers full compatibility across all plugins but does not allow arbitrary transforms

rawgit.com

https://github.com/eKoopmans/html2pdf.js

GitHub - eKoopmans/html2pdf.js: Client-side HTML-to-PDF rendering using pure JS.

Client-side HTML-to-PDF rendering using pure JS. Contribute to eKoopmans/html2pdf.js development by creating an account on GitHub.

github.com

공부내용을 기록하는 블로그입니다.

피드백은 언제든지 환영합니다😊

저작자표시

'Cod-ing > JavaScript' 카테고리의 다른 글

[JavaScript] 10분마다 실행되는 함수 (0)	2023.10.18
[JavaScript] PDF다운로드 기능 구현하기 (html2pdf) 오류 해결! (0)	2023.09.21
[JavaScript] 전개구문(Spread syntax)이란? (0)	2023.09.17
[JavaScript] 구조분해할당이란? (0)	2023.08.27
[JavaScript] data- 속성을 이용한 그래프 바 만들기 (0)	2022.04.20