본문 바로가기
웹 프로그래밍

[HTML/JS] js로 보이는 화면 PDF로 다운로드하기

by Ratataca 2023. 9. 18.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML to PDF</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
</head>
<body>
    <!-- 여기에 화면 내용을 추가합니다. -->
    <h1>Hello, World!</h1>
    <p>This is a sample content.</p>
    <button onclick="generatePDF()">Generate PDF</button>

    <script>
        function generatePDF() {
            const { jsPDF } = window.jspdf;
            const pdf = new jsPDF();
            const element = document.body; // 화면 내용을 포함하는 요소

            // jsPDF의 html2pdf 모듈을 사용하여 HTML을 PDF로 변환
            pdf.html(element, {
                callback: function (pdf) {
                    // 생성된 PDF를 다운로드
                    pdf.save('output.pdf');
                }
            });
        }
    </script>
</body>
</html>

댓글