html2canvas와 jspdf를 이용 pdf 맹글깅

자바스크립트

by e7e 2023. 5. 24. 23:22

여러 페이지일 경우 페이지의 끝과 다음 시작이 겹칠때는 내용의 위치 튜닝이 쪼메 필요하당.

실행해 보면 바로 느낌이 올 것이당!.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
</head>
<body>
    <div id="areaContainer" style="text-align: center;">
        <script>
            const fcolor = ()=>{
                return  `rgb(${Math.floor(Math.random()*256)},
                             ${Math.floor(Math.random()*256)},
                             ${Math.floor(Math.random()*256)}
                        )`;
            }

            let direction = true; 
            for(i=1;i>=1 && i<=6;){
                document.write(`<h${i} style="color:${fcolor()}" >난 최고의 프로그래머당</h${i}>`)
                if(i==6) direction=false;
                if(direction) i++;
                else i--;
            }
        </script>
    </div>
    <button id="btn_pdf">PDF</button>
<script>
    let jsPDF = jspdf.jsPDF;
     //pdf download
     $("#btn_pdf").on("click", function() {
         html2canvas($('#areaContainer')[0]).then(function(canvas) {
                // 캔버스를 이미지로 변환 
                var imgData = canvas.toDataURL('image/png');
                var imgWidth = 190;
                var pageHeight = 295; 
                var imgHeight = parseInt(canvas.height * imgWidth / canvas.width); // 소숫점 귀찮앙
                var heightLeft = imgHeight;
                var margin = 0; // 출력 페이지 왼쪽 여백설정
               
                var doc = new jsPDF('p', 'mm','a4'); /* p-> portrait, mm->millimeters, a4-> export a4로 디폴트값이당 */
                var position = 30;
                
                // 첫 페이지 출력
                doc.addImage(imgData, 'PNG', margin, position, imgWidth, imgHeight);
                heightLeft -= pageHeight;
                
                console.log("imgHeight",imgHeight);
                
               // 페이지가 더 있을 경우 루프 돌면서 출력
                while (heightLeft >= 0) {
                    position = heightLeft - imgHeight;
                    doc.addPage();
                    doc.addImage(imgData, 'PNG', margin, position, imgWidth, imgHeight);
                    heightLeft -= pageHeight;
                }
             
                // 파일 저장(다운로드)
                doc.save('메롱메롱.pdf');
            });
      });
</script>    
</body>
</html>

만약 pdf 파일을 서버에 올리고 싶다면 아래 소스를 참고하장!

보면 느낌온당. (설마 나만?)

                    var blobPDF1 = doc.output('blob');
                    console.log("체킁2:", blobPDF1);  // blobPDF와 같음을 알 수 있음!

                    let formData = new FormData();
                    formData.append("pdfFile", blobPDF1);

                    let xhr = new XMLHttpRequest();
                    xhr.open("post", "컨트롤러URL");
                    xhr.setRequestHeader(header, token);
                    xhr.onreadystatechange = function () {
                        if (xhr.readyState == 4 && xhr.status == 200) {
                            console.log(xhr.responseText);
                        }
                    }
                    xhr.send(formData);

비가 오는 것을 논리로 설명하려 한다면

그것은 아주 비 논리적인 행동일 것이다.!!!

비를 논리로 설명할 것이 아니라, 빗소리와 함께 그저 갬성을 적시면 충분할 것이다.

현실적 논리는 쇠처럼 단단해서 부딪힐 수록 자신과 주위를 아프고 불편하게 할 것이다.

비논리의 감성으로 현실 논리를 말랑말랑 감싸 안아 주어야 비로서 둘 다 살 수 있다!

https://www.youtube.com/watch?v=bo_efYhYU2A

'자바스크립트' 카테고리의 다른 글

시베리안 허숙희의 자바스크립트 비기닝 2 (3)	2023.05.29
시베리안 허숙희의 자바스크립트 비기닝 1 (0)	2023.05.28
fancytree (0)	2023.05.09
visual studio code emmit 단축키 (0)	2023.04.18
node mongoose (0)	2023.04.16