.gif&blockId=11b00c82-b138-8050-a58b-dcbceda2ef8f)
설명
html을 pdf로 변환시켜주는 라이브러리
설치
•
npm
npm install --save html2pdf.js
JavaScript
복사
•
cdn
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js" integrity="sha512-GsLlZN/3F2ErC5ifS5QtgpiJtWd43JWSuIgh7mbzZ8zBps+dvLusV+eNQATqgA/HdeKFVgA5v3S/cIrLF7QnIg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
TypeScript
복사
사용법
// html 태그 지정해논 ID의 요소를 가져온다.
const element = document.getElementById('element-to-print');
// 1. set() : 옵션 지정
// 2. from() : pdf로 변환할 html 요소
// 3. save() : 저장
html2pdf().set().from(element).save();
JavaScript
복사
옵션
margin: all | [y, x], [top, left, bottom, right ]
filename: '내보낸 pdf의 기본 파일 이름',
pagebreak: { mode: 'avoid-all' | 'css' | 'legacy' },
image: { type: '유형', quality: 품질(0~1) },
enableLinks: boolean, // 자동으로 앵커태그 위에 하이퍼링크 추가
html2canvas: { scale: 품질(0~2), useCORS: boolean // CORS사용여부 },
jsPDF: { unit: 'mm | cm | in | pt',
format: 'a3 | a4 | a5 ...',
orientation: 'portrait | landscape',
fontSize: number
}
TypeScript
복사
pagebreak
•
mode
◦
avoid-all : 페이지 나누기를 하지 않고 한 페이지에 모두 표시 될 수 있도록 크기 조정
페이지에 맞게 자동 조정됨
◦
css : CSS의 break-before, break-after, break-inside속성 사용하여 페이지 나누기 제어
◦
legacy : 클래스가 html2pdf__page-break인 요소 뒤에 페이지 나누기 추가
•
before
◦
타입: 문자열 또는 배열
◦
기본값: []
◦
설명: 각 요소 앞에 페이지 나누기를 추가할 CSS 선택자 지정
•
after
◦
타입: 문자열 또는 배열
◦
기본값: []
◦
설명: 각 요소 뒤에 페이지 나누기를 추가할 CSS 선택자 지정
•
avoid
◦
타입: 문자열 또는 배열
◦
기본값: []
◦
설명: 페이지 나누기를 피할 CSS 선택자 지정
예시
const element = document.getElementById('element-to-print');
const opt = {
margin: 10,
filename: 'mypdf.pdf',
pagebreak: { mode: 'css', before: '.page-break' },
image: { type: 'png', quality: 0.8 },
enableLinks: false,
html2canvas: { scale: 2 },
jsPDF: { unit: 'in', format: 'a4', orientation: 'landscape' }
};
html2pdf().set(opt).from(element).save();
TypeScript
복사
