JavaScript를 사용하여 브라우저 페이지를 PDF로 다운로드

안녕하세요 여러분, 오늘은 브라우저 페이지를 PDF로 저장하는 방법을 다룰 것입니다. Vanilla JavaScript를 사용하여 PDF를 생성합니다. 이 기능을 사용하여 사용자를 위한 송장 또는 영수증을 생성할 수 있습니다.

전제 조건

🎯 자바스크립트
🎯 HTML
🎯 html2pdf.js CDN

목차

HTML code

JavaScript code

Conclusion

♣️ index.html에 전체 코드를 작성하기로 결정했습니다. 편하게 리팩터링하십시오. 인보이스 템플릿은 heidilux가 작성한 Bootsnip에서 가져온 것입니다. 이 프로젝트에 맞게 템플릿을 약간 조정했습니다.

🎯 먼저 html2pdf CDN 상용구의 헤드에 HTML 스크립트를 추가합니다.


🎯 또한 이것을 머리에 추가하십시오

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>

🎯 다음으로 인보이스에 포함된 모든 데이터를 보유하고 있는 div container의 index.html를 구체화해 보겠습니다.
📝 div에 표시할 콘텐츠를 래핑했는지 확인하세요.



🎯 우리글쓰기버튼onclick 이벤트

    <button onclick="generatePDF()">Generate Invoice</button>

🎯 마지막으로 JavaScript 함수를 작성합니다.

<script>
    function generatePDF() {
        const element = document.getElementById('invoice');
        html2pdf()
            .from(element)
            .save();

    }
</script>

---

Click on the Generate Invoice button to test.

결론

I hope this post has been helpful and thought you how to generate pdf. Leave a comment below if you have better ways to generate pdf using JavaScript .

---

자원

🍄 Voran과 코드로

Web Socket 👇을 사용하여 메일📬을 보내는 방법 알아보기

Back to top

drsimplegraffiti / drsimplegraffiti

내 GitHub 프로필에 대한 구성 파일입니다.