투덜이 개발자

PDF 다운로드- html2pdf.js 이용 본문

Program Language/JavaScript & Jquery

PDF 다운로드- html2pdf.js 이용

엠투 2021. 11. 24. 15:04
반응형

PDF 다운로드- html2pdf.js 이용 샘플 구현

샘플페이지

html2pdf.bundle.js 파일 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PDF 다운로드- html2pdf.js 이용</title>
</head>
<script src="./js/html2pdf.bundle.js"></script>
<script>
	function pdf_down() {
		console.log("PDF 다운로드");
		// Get the element.
		var element = document.getElementById('pdf_canvas');

		// Generate the PDF.
		html2pdf().from(element).set({
			margin: 10,
			filename: 'filename.pdf',
			html2canvas: { scale: 1 },
			jsPDF: {orientation: 'portrait', unit: 'mm', format: 'a4', compressPDF: true}
		}).save();
	}
</script>
<body>

	<button onclick="pdf_down();">PDF 다운로드</button>

	<div id="pdf_canvas">
		<!-- pdf 생성 영역 부분 -->

		<div style="background-image:url('./images/mail.gif');background-position:right bottom;background-repeat:no-repeat;color:#555;padding:10px 20px;">

		  <div>
			<h1 style="margin:0 auto 30px;padding-bottom: 6px;text-align: center;border-bottom: 1px solid #ccc;"><img src="./images/logo-greenplus.png" alt="그린플러스 로고" /></h1>
			<div style="border-bottom:2px solid #e5e5e5;font-size: 32px;line-height:1.2em;padding-bottom:30px;font-weight: 600;letter-spacing: -.1em;">
			  <span style="color:#00a297;">비밀번호 재설정</span>에 대한<br>이메일 회신입니다.
			</div>
		  </div>

		  <div style="padding-top:30px">

			<div style="margin-bottom:20px;color:#555;font-size:16px;line-height:1.4;letter-spacing: -.06em;">
				회원님의 플레이더세이프티 비밀번호 재설정 요청을 받았습니다.
				<br> 아래의 링크를 클릭하여 비밀번호를 재설정 해주시기 바랍니다.
			</div>

			<div><img src="./images/Tulips.jpg"></div>
			<div><img src="./images/Penguins.jpg"></div>
			<div><img src="./images/Lighthouse.jpg"></div>
			<div><img src="./images/Koala.jpg"></div>
			<div><img src="./images/Jellyfish.jpg"></div>
			<div><img src="./images/Hydrangeas.jpg"></div>
			<div><img src="./images/Desert.jpg"></div>
			<div><img src="./images/Chrysanthemum.jpg"></div>

		  </div>

		</div>

		<!-- pdf 생성 영역 부분 -->
	</div>

</body>
</html>
  • 크롬에서 정상작동, 익스에서 작동 불가
  • a4 용지에 최적화 필요함
  • 2페이 넘어갈때 이미지 짤리는 현상 발생함

 

참고

https://lisfe.tistory.com/680

 

html 화면 웹페이지를 pdf 파일로 저장 html2pdf.js

웹페이지의 특정영역을 canvas이미지로 저장하고 PDF파일로 저장/캡쳐하는 자바스크립트 라이브러리입니다. https://moonsiri.tistory.com/71 직접 html2canvas.js 와 jspdf.js 를 활용하여 웹페이지 PDF 파일 저..

lisfe.tistory.com

 

HTML2CANVAS + jsPDF

https://devheedoo.github.io/posts/save-html-to-pdf/

 

Save HTML to PDF - Heedo's Dev Blog

프로젝트에서 HTML 화면을 PDF로 출력해야하는 경우가 생겼다. iText 라이브러리의 경우 html을 pdf로 변환해주지만 CSS 적용에 한계가 있었다. 그래서 두 가지 라이브러리를 이용해 현재 화면을 이미

devheedoo.github.io

2페이지 이상 처리가 되지 않고 이미지가 축소되어버림.

샘플페이지

 

다른 참고..

https://jeffrey-oh.tistory.com/363

 

html -> pdf 다운로드 (html2canvas + jsPDF)

데이터의 결과를 나타내는 페이지를 보고서 형식 비슷하게 출력을 해야하는데 html 내용을 pdf로 다운로드 할 수 있는 라이브러리가 있어서 정리하는 글이다. html2canvas html2canvas 라이브러리는 이

jeffrey-oh.tistory.com

 

반응형
저작자표시

'Program Language > JavaScript & Jquery' 카테고리의 다른 글

부트스트랩 모달 내용 부분에 세로 스클롤 사용하기  (0) 2022.01.03
jQuery select box Control 제어  (0) 2021.12.09
ajax로 파일(multipart/form-data) 전송하기  (0) 2021.11.12
한글 입력 방지  (0) 2021.11.11
부트스트랩 모달창 열고 닫기  (0) 2021.11.09
'Program Language/JavaScript & Jquery' Related Articles more