'Web. 기타 언어/html' 카테고리의 글 목록

'Web. 기타 언어/html'에 해당되는 글 1건

2020.04.01 web.html 화면을 pdf로 저장하기 4

web.html 화면을 pdf로 저장하기

Web. 기타 언어/html 2020. 4. 1. 11:51

[ web.html 화면을 pdf로 저장하기 ]

1. 정의

- webbrowser에서 보여지고 있는 상태 그래도 pdf로 저장한다.

2. 방법

a. jspdf js 기능

- jdspdf : html, 이미지, canvas객체를 pdf로 변환해주는 라이브러리

html2canvas : html객체를 canvas로 변환해주는 라이브러리

- 참고 url : https://blog.naver.com/rnjsrldnd123/221526274628

- 아래 파일 2개를 생성 후 테스트

b. self.print();

- 인쇄버튼 누르면 출력 또는 pdf로 저장 가능

3. 이슈 및 특징

가. jspdf를 통해서 html 객체를 바로 pdf로 변환할 수도 있지만

        , css가 깨지는 문제가 있어서 다음과 같은 순서로 작업을 진행
     1. html2canvas를 이용해 원하는 html 객체를 canvas 객체로 변환
     2. 변환된 canvas 객체를 png 이미지로 변환
       3. png 이미지를 기반으로 pdf 생성 및 로컬에 저장

    나. # html2canvas 사용 시 제가 겪은 몇 가지 문제점입니다.
       1. float:left 속성이 있는 div는 canvas에 그려지지 않음
       2. svg 이미지는 canvas에 그려지지 않음
       3. 하위 div의 display 속성이 block일 경우 그려지지 않음

4.1 소스 (jsPDF.html)

<!DOCTYPE html> <link rel="stylesheet" type="text/css" href="zJsPDF.css"> <script type = "text/javascript" src = "http://code.jquery.com/jquery-latest.min.js"></script> <script type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script> <script type = "text/javascript" src = "https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script> <html> <body> <div id="pdf_wrap"> <h2> javascript </h2> <h1> 안녕하세요! </h1> <h2> 저는 Mosball입니다. </h2> </div> <button id="create_pdf"> pdf 생성 </button> </body> </html> <<script type="text/javascript"> $('#create_pdf').click(function() { //pdf_wrap을 canvas객체로 변환 html2canvas($('#pdf_wrap')[0]).then(function(canvas) { var doc = new jsPDF('p', 'mm', 'a4'); //jspdf객체 생성 var imgData = canvas.toDataURL('image/png'); //캔버스를 이미지로 변환 doc.addImage(imgData, 'PNG', 0, 0); //이미지를 기반으로 pdf생성 doc.save('sample-file.pdf'); //pdf저장 }); }); </script>

4.2 소스(jsPDF.css)

#pdf_wrap { background-color:black; text-align:center; } #pdf_wrap > h1 { color:blue; } #pdf_wrap > h2 { color:yellow; }