ブラウザとしてダウンロードページ

こんにちは人々、今日、我々はどのように我々のブラウザーページをPDFとして保存するかについて説明します.バニラJavaScriptを使用してPDFを生成します.この機能は、請求書やユーザーのための領収書を生成するために使用することができます.

前提条件

🎯 ジャバスクリプト
🎯 HTML
🎯 HTML 2 PDFファイル.JS CDN

目次

HTML code

JavaScript code

Conclusion

♣️ 全部のコードを書くことにしますindex.html , お気軽にあなたの便宜にそれをリファクタリング.請求書テンプレートはBootsnip Hiidiluxによって書かれます.私はこのプロジェクトに合わせてテンプレートに少し微調整した.
🎯 まず第一に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ソケットの使用👇

Back to top

Drimple落書き / Drimple落書き

Githubプロファイルの設定ファイルです。