해당 사이트
https://ekoopmans.github.io/html2pdf.js/
html2pdf.js
Client-side HTML-to-PDF rendering using pure JS.
ekoopmans.github.io
html2pdf.js 는 html2canvas 와 jsPDF 를 이용하여
웹페이지의 화면이나 특정 html 의 태그를 pdf 파일로 변환해 주는 Javascript 라이브러리 다
Java 에서 Openhtmltopdf PDF Rendering dependency 를 추가해서
PdfRendererBuilder 를 이용하여 pdf 를 만들려고 했는데
html 내의 데이터가 영어 외의 언어면 ######## 로 깨지는 문제가 발생하였고
font 를 추가하여 설정하면 된다고 하는데 잘 되지 않아서
Javascript 로 제어할 수 있는 html2pdf.js 을 사용하게 되었다
Javascript
function pdfDownLoad(){
// javascript
//const element = document.querySelector("#pdfDown");
// jquery
const element = $("#pdfDown")[0];
/*
html2pdf 자체 옵션, html2canvas 옵션, jsPDF 옵션 세가지로 나뉜다
*/
/*
html2pdf 옵션
margin: 0 // pdf 여백(html2pdf 자체 옵션)
filename: 'download.pdf' // 파일 저장 명(html2pdf 자체 옵션)
image: { type: 'jpeg', quality: 0.95 } // pdf 에 넣을 이미지 확장자와 품질
enableLinks: true // html 내의 링크를 pdf 에서도 클릭 가능하게 여부
pagebreak: // 태그를 기준으로 페이지를 나누는 방식(여기선 정리하지 않겠음)
등등
*/
/*
html2canvas 옵션
scale: 2 // 해상도 배율(2~3권장)
useCORS: false // 외부이미지(CORS) 허용 여부 기본값 false
allowTaint: false // cross-origin 이미지 그리기 허용 기본값 false
backgroundColor: #ffffff // 배경색 기본값 #ffffff
등등
*/
/*
jsPDF
unit: 'mm' // 'pt', 'mm', 'cm'. 'in', 'px' 의 단위를 나타냄 기본값은 'mm'
format: 'a4' // 용지크기
orientation: 'portrait' // 페이지 방향 portrait, landscape
compressPDF: false // pdf 압축 여부 기본값 false
등등
*/
html2pdf().set({
margin: 0.5,
filename: 'download.pdf',
html2canvas: { scale: 2, useCORS: true },
jsPDF: { unit: 'in', format: 'a4', orientation: 'portrait' }
}).from(element).save();
}
html
<body>
<div class="d-sm-flex align-items-center justify-content-between mb-4">
<h1 class="h3 mb-0 text-gray-800">사내 일정</h1>
<button type="button" onclick="pdfDownLoad()">PDF DownLoad</button>
</div>
<div id="pdfDown">
<!-- DataTales Example -->
<div class="card shadow mb-4">
<div class="card-header py-3" style="text-align: left">
<h5 class="m-0 font-weight-bold text-dark">달력</h5>
</div>
<div class="card-body">
<div id="calendar-container">
<div id="calendar"></div>
</div>
</div>
</div>
</div>
</body>
<!-- html2pdf cdn -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
html2pdf.js 을 사용할 임의의 태그에 id="pdfDown" 을 지정해 주었다
TEST
PDF DownLoad 버튼을 클릭하면
from(element).save() 코드로 인하여 파일로 바로 저장된다
pdf 로 만들려는 태그의 크기를 따로 설정을 하지 않으면
현재 웹페이지에서 보여지는 크기로 파일을 생성한다
위의 저장된 pdf 의 경우 브라우저의 크기를 줄여서 작아진 상태일 때 pdf 파일을 만든 경우이고
아래의 이미지의 경우 전체화면 브라우저 상태에서 pdf 파일을 만든 경우 다
이런 식으로 태그의 내용이 잘려서 파일이 생성되기 때문에 pdf 를 생성할 때 크기를 계산해야 한다
각각의 프로젝트마다 화면 구조 및 구현하려는 방식이 다르고,
css 도 제각기 이기 때문에 크기 계산에 대한 코드는 정리하지 않겠다
참고로 pdf 를 만들려는 태그 또는 화면을 이미지와 하여 pdf 로 만드는 경우
pdf 에 맞는 크기로 만들어질 수 있으나,
태그 또는 화면에 링크 기능이 있다면 해당 기능은 이미지 화 되어 동작하지 않으니 참고할 것
'개발 > JavaScript' 카테고리의 다른 글
| [JavaScript] Owl Carousel 사용하기 (5) | 2025.08.04 |
|---|---|
| [JavaScript] Kakao URL 공유하기 (4) | 2025.07.26 |
| [JavaScript] Ajax 옵션 beforeSend 를 이용한 Loading 만들기 (1) | 2025.05.05 |
| [JavaScript] Editor 만들기(바닐라, Vanilla) (0) | 2025.03.29 |
| [JavaScript] 브라우저 개발자 도구(F12) 막기 (0) | 2025.03.12 |
댓글