html문서를 pdf로 저장하기, 브라우저 내용을 pdf로 저장, jsPDF 로 저장해서 다운로드 가능하게 만들기 , javascript/ jQuery

HTML 문서의 내용을 PDF로 저장하기

 

HTML 내용을 PDF 로 저장하려면 출력(인쇄)버튼을 클릭해서 출력옵션에 보이는 PDF로 저장 기능을 이용하면 됩니다만. 여기서는, 그 기능을 사용하지 않고, HTML 내에서 javascript/jQuery를 이용하여 바로 PDF로 저장하는 방법을 설명드리겠습니다

 

 

 

 

 

 

 

jsPDF 를 이용하면 쉽게 해결이 가능합니다

 

아래와 같이 jquery, canvas, jspdf 관련 파일을 CDN 으로 불러온 후에 jsPDF 객체를 생성하면 가능합니다. 

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
 
<div id="content">
  <h1 style="color:red">안녕하세요</h1>
  <p>PDF 문서의 내용입니다</p>
</div>
 
<script language = "javascript">
let doc = new jsPDF('p','pt','a4');
 
 
doc.addHTML(document.body,function() {
    doc.save('html.pdf');
});
 
</script>

 

 

가로, 세로 변경하기 / PDF 문서크기 조정하기

jsPDF 객체를 생성할때 옵션으로 문서의 가로세로 설정이 가능하고, 문서의 크기도 인치 단위로 설정할 수 있습니다. 

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
 
<div id="content">
  <h1 style="color:red">안녕하세요</h1>
  <p>PDF 문서의 내용입니다</p>
</div>
 
<script language = "javascript">
 
const doc = new jsPDF({
  //orientation: "landscape",
  orientation: "portrait",
  //format: "a4"
  format: [4, 2]
});
 
doc.addHTML(document.body,function() {
    doc.save('html.pdf');
});
 
</script>

 

orientation 옵션을 landscape / portrait 로 설정하여 가로 세로를 조정할 수가 있고, format 옵셥을 이용하여 가로세로 길이를 설정할 수 있습니다. a4 로 설정하면 a4사이즈가 설정되며 [4,2] 와 같이 설정하면 세로 4인치, 가로 2인치의 pdf 문서가 생성됩니다.

 

 

 

위 코드를 실행시키면 바로 pdf 문서를 다운로드 하라는 창이 뜨게 됩니다^^

 

 

참고로 저 동해둘리가 직접 운영하는 '성공하는 중이다'  카페를 소개드립니다. 

각자의 분야에서 성공을 향해 가는 과정에서 힘이되는 이야기, 힘이되는 사진, 성공스토리, 실패스토리 등을 나누고자 합니다. 많은 참여 부탁드려요

 

https://cafe.naver.com/ingsuccess

성공하는 중이다 : 네이버 카페

 

 

 

 

아래 사이트를 참조했습니다 

 

github.com/MrRio/jsPDF