[js] 웹페이지 pdf로 내려받기

pdf로 내려받기 기능을 사용하기 위해 jspdf, html2canvas 라이브러리 추가

 

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

<script>
    document.getElementById("btnPdfDownload").addEventListener("click", function() {
        // PDF 생성
        const { jsPDF } = window.jspdf;
        const doc = new jsPDF();

        // 팝업 화면에서 PDF로 저장할 부분을 가져옵니다. 버튼을 제외해야 하므로 특정 섹션만 선택합니다.
        const content = document.querySelector("#P01 .modal-body").cloneNode(true);

        // 팝업 화면의 버튼은 제거합니다.
        content.querySelectorAll('button').forEach(btn => btn.remove());

        // HTML을 캔버스에 그린 후 PDF로 변환합니다.
        doc.html(content, {
            callback: function (doc) {
                // PDF 저장
                doc.save('P01.pdf');
            },
            x: 10,
            y: 10,
            width: 180, // PDF 너비에 맞게 설정
            windowWidth: content.scrollWidth, // 창 너비에 맞게 설정
        });
    });
</script>