Cara Konvert File HTML ke File PDF dengan jQuery

Pernahkan kalian membuat file lalu dikonvert ke file PDF ? pasti pernah yah, entah itu dengan word ataupun dengan software lainnya. Namun pernahkan kalian melakukan konvert file dari HTML ke PDF ? jika belum pernah, berikut ini akan saya sharing mengenai bagaimana caranya konvert file HTML ke PDF dengan jQuery, Berikut ini adalah langkah-langkah cara konvert file HTML ke PDF.

Pada kasus ini, kita akan konvert file HTML ke PDF dengan sedikit bantuan jQuery, Namun sebelum nya kita akan buat sebuah konten dengan HTML untuk nantinya kita jadikan file PDF. Silahkan ketikan kode HTML seperti berikut.

<body>
    <div class="wrapper">
        <div id="konten">
            <h2>Hello, Lorem Ipsum is simply dummy text</h2>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
        </div>
        <div id="editor"></div>
        <button id="konvert">Generate PDF</button>
    </div>
</body>

Setelah membuat konten seperti diatas, selanjutnya, kita akan sedikit desain tampilan HTML diatas terlebih dahulu dengan kode CSS3 berikut ini.

.wrapper {
            width: 850px;
            margin: auto;
            border: 2px solid #444;
            padding: 20px;
        }
        #konvert {
            background: #444;
            border: 2px solid #444;
            border-radius: 1px;
            padding: 10px;
            color: #fff;
            font-weight: bold;
        }
        #konvert:hover {
            background: #fff;
            color: #444;
        }

Selanjutnya barulah kita akan menambahkan atau meload library jspdf berikut ini untuk fungsi konvert filenya, silahkan tambahkan kode js berikut ini beserta library jspdf.

<!--Tambahkan Libraries - JQuery and jspdf-->
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/0.9.0rc1/jspdf.min.js"></script>
<script type="text/javascript">
    var doc = new jsPDF();
        var specialElementHandlers = {
            '#editor': function (element, renderer) {
            return true;
        }
    };

    $('#konvert').click(function () {   
        doc.fromHTML($('#konten').html(), 15, 15, {
            'width': 170,
                'elementHandlers': specialElementHandlers
        });
        doc.save('contoh-file.pdf');
    });
</script>

Setelah semua kode diatas diketikan, simpan dan lihat hasilnya pada browser masing-masing, maka kita akan melihat tampilan seperti gambar berikut.

cara-konvert-file-html-ke-pdf-dengan-jquery-24102017

Jika kita klik tombol generate, maka akan kita dapatkan file konvert nya menjadi file PDF.
Bagaimana, cukup menarik bukan ? Baiklah cukup sekian artikel mengenai bagaimana cara konvert file HTML ke file PDF dengan jQuery, semoga bermanfaat.

24 Oktober 2017

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat