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.
<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.
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.
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.
Webinar Gratis 2024
Sabtu, 09 Maret 2024
10 Bahasa Rekomendasi Untuk Dipelajari di 2024
Python Developer, Data Science, Web Application
Minggu, 26 Mei 2024, 09.00-13.00 WIB
(4 Jam Membuat Backend di Laravel 11)
