[javascript] HTML -> PNG 나 PDF로 저장하기

필요 라이브러리

/// 샘플 코드

let elemSelector = "body";

const { jsPDF } = window.jspdf;

if(elemSelector === ""){
      elemSelector = prompt("요소값을 입력해 주세요. (ex: body, #elemBox)");
}

if(elemSelector !== ""){
      html2canvas(document.querySelector(elemSelector)).then(function(canvas) {
            // 이미지 생성
            document.body.appendChild(canvas);

            // 이미지 다운로드
            var a = document.createElement('a');
            a.href = canvas.toDataURL('image/png');
            a.download = "capture.png";
            document.body.appendChild(a);
            a.click();

            // PDF 생성
            var imgData = canvas.toDataURL('image/png');
            var imgWidth = 210;
            var pageHeight = imgWidth * 1.414;
            var imgHeight = canvas.height * imgWidth / canvas.width;
      
            var doc = new jsPDF({
                  'orientation': 'p',
                  'unit': 'mm',
                  'format': 'a4'
            });
      
            doc.addImage(imgData, 'PNG', 0, 0, imgWidth, imgHeight);
            doc.save('capture.pdf');
      });
}

Leave a Comment