자바스크립트에서 pdf 출력하기 (html2canvas + jspdf)

https://rawgit.com/MrRio/jsPDF/master/docs/jsPDF.html

jsPDF - Documentation

 

 

jspdf.min.js

0.22MB

html2canvas.min.js

0.06MB

bluebird.min.js

0.08MB

 

 

<script src="/lib/pdfjs/jspdf.min.js"></script>
<script src="/lib/pdfjs/bluebird.min.js"></script>
<script src="/lib/pdfjs/html2canvas.min.js"></script>

<script>

    function pdfPrint(){

        // 현재 document.body의 html을 A4 크기에 맞춰 PDF로 변환
        html2canvas(document.body, {
            onrendered: function (canvas) {

                // 캔버스를 이미지로 변환
                var imgData = canvas.toDataURL('image/png');

                var imgWidth = 210; // 이미지 가로 길이(mm) A4 기준
                var pageHeight = imgWidth * 1.414;  // 출력 페이지 세로 길이 계산 A4 기준
                var imgHeight = canvas.height * imgWidth / canvas.width;
                var heightLeft = imgHeight;

                var doc = new jsPDF('p', 'mm');
                var position = 0;

                // 첫 페이지 출력
                doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
                heightLeft -= pageHeight;

                // 한 페이지 이상일 경우 루프 돌면서 출력
                while (heightLeft >= 20) {
                    position = heightLeft - imgHeight;
                    doc.addPage();
                    doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
                    heightLeft -= pageHeight;
                }

                // 파일 저장
                doc.save('sample.pdf');


                //이미지로 표현
                //document.write('<img src="'+imgData+'" />');
            }
            
        });
        
    }

    window.onload = function(){
        pdfPrint();
    }

</script>

 

* chart.js 를 출력할 경우 

애니메이션을 사용하지 않아야 그래프 길이가 정상 적으로 나온다.

responsiveAnimationDuration: 0,

animation: { duration: 0 },

 

 

 

 

참고

 

https://otep.tistory.com/381

[JS] HTML 화면을 PDF로 출력

// 현재 document.body의 html을 A4 크기에 맞춰 PDF로 변환
html2canvas(document.body, {
  onrendered: function(canvas) {
 
    // 캔버스를 이미지로 변환
    var imgData = canvas.toDataURL('image/png');
     
    var imgWidth = 210; // 이미지 가로 길이(mm) A4 기준
    var pageHeight = imgWidth * 1.414;  // 출력 페이지 세로 길이 계산 A4 기준
    var imgHeight = canvas.height * imgWidth / canvas.width;
    var heightLeft = imgHeight;
     
        var doc = new jsPDF('p', 'mm');
        var position = 0;
         
        // 첫 페이지 출력
        doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
        heightLeft -= pageHeight;
         
        // 한 페이지 이상일 경우 루프 돌면서 출력
        while (heightLeft >= 20) {
          position = heightLeft - imgHeight;
          doc.addPage();
          doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
          heightLeft -= pageHeight;
        }
 
        // 파일 저장
        doc.save('sample_A4.pdf');
  }
});

 

 

https://jsfiddle.net/crabbly/kL68ey5z/

Chart.js and jsPDF - JSFiddle

 

 

 

https://itinerant.tistory.com/51

[JavaScript] html2canvas 사용 방법

 

// 
html2canvas(document.body, {
    backgroundColor: "#000000"  # 배경 색 선택. 기본값 : 흰색
}).then(function(canvas) {
    var base64image = canvas.toDataURL("image/png");
    window.open(base64image , "_blank");  // Open the image in a new window
});



// Javascript일 경우
html2canvas(document.getElementById("capture")).then(function(canvas) {
});
 
// JQuery일 경우
html2canvas($("capture")[0]).then(function(canvas) {
});


data-html2canvas-ignore="true"로 canvas에서 보여지지 않게 처리
<div id="capture">
    <span>a</span>
    <span>b</span>
    <div id="hide" data-html2canvas-ignore="true">
        <span>c</span>
    </div>
</div>


a태그 사용해서 저장할 경우
html2canvas(document.body, {
    onrendered: function (canvas) {
        var a = document.createElement('a');
        a.href = canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream");
        a.download = 'out.jpg';
        a.click();
    }
});