[jsp] 해당 페이지 PDF로 다운

1. 필요한 js파일 다운로드

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

2. 사용되는 jsp 파일에 추가

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

3. javascript 

function pdfDownload() {
    plain.style.display='none';
    test.innerText = '펼치기 ▲';

    html2canvas($('#pdfDiv')[0]).then(function(canvas) { //저장 영역 div id

        // 캔버스를 이미지로 변환
        var imgData = canvas.toDataURL('image/png');
        var imgWidth = 190; // 이미지 가로 길이(mm) / A4 기준 210mm
        var pageHeight = imgWidth * 1.414;  // 출력 페이지 세로 길이 계산 A4 기준
        var imgHeight = canvas.height * imgWidth / canvas.width;
        var heightLeft = imgHeight;
        var margin = 10; // 출력 페이지 여백설정
        var doc = new jsPDF('p', 'mm', 'a4');
        var position = 0;

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

        // 한 페이지 이상일 경우 루프 돌면서 출력
        while (heightLeft >= 20) {
            position = heightLeft - imgHeight;
            doc.addPage();
            doc.addImage(imgData, 'PNG', margin, position, imgWidth, imgHeight);
            heightLeft -= pageHeight;
        }
        // 파일 저장
        doc.save('테스트.pdf');
    });
}

참조 : https://chichi-story.tistory.com/10