Cara mengkonvert sebuah file HTML Ke file PDF
Hello guys welcome back to my blog!
Kali ini admin akan berbagi tutorial tentang Cara mengkonvert sebuah
file HTML Ke file PDF
Pernahkah kamu mebuat sebuah file lalu dikovert ke file PDF? Pasti
pernah dong, Entah itu dengan wordpad ataupun dengan software lainnya .
Tapi
pernahkah kalian melakukan Konvert sebuah file dari HTML Ke PDF?
Jika kamu
belum pernah , admin bakal share ke kalian yaitu Cara konvert semuah file HTML
Ke PDF Dengan jQuery, Berikut ini langkah langkah Tutorialnya .
Pada Tutorial kali ini , admin bakal konvert sebuah file HTML ke PDF
Dengan sedikit bantuan dari jQuery,
Namun sebelum itu kita abakalan buat sebuah
konten dengan html untuk nantinya admin jadiin ke file PDF , Berikut script
kode HTML Seperti TEXT berikut
ini.
<body>
<div class="wrapper">
<div id="konten">
<h2>Halo . Saya sedang mempraktikan tentang cara mengkonvert file html ke pdf </h2>
<p>Saya akan mengkonvert sebuah file pdf dengan bantuan jQuery.</p>
</div>
<div id="editor"></div>
<button id="konvert">Generate PDF</button>
</div>
</body>
<div class="wrapper">
<div id="konten">
<h2>Halo . Saya sedang mempraktikan tentang cara mengkonvert file html ke pdf </h2>
<p>Saya akan mengkonvert sebuah file pdf dengan bantuan jQuery.</p>
</div>
<div id="editor"></div>
<button id="konvert">Generate PDF</button>
</div>
</body>
Setelah membuat konten seperti diatas, Berikutnya, kita bakal ngedesain
tampilan HTML terlebih dahulu dengan sebuah kode CSS3 seperti 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;
}
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;
}
Langkah selanjutnya adalah admin bakal menambahkan sebuah script yaitu meload
library jspdf seperti berikut ini yang fungsinya mengckonvert filenya,
silakan kamu tambahkan Kode atau Script js berikut ini
dengan library jspdfnya.
<!--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>
<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 script atau kode diatas diketik . Simpan dan lihat
hasilnya pada browser kamu, maka kita akan melihat tampilan seperti gambar
berikut.
jika kamu mengklik tombol Generate , maka kamu akan mendapatkan
sebuah file konvertnya menjadi sebuah file PDF
Berikut Hasilnya
Gimana gan, Cukup mudah bukan ? Okelah cukup sekian artikel mengenai
Bagaimana cara mengkonvert sebuah file HTML Ke file PDF Dengan jQuery.
Terimakasih dan jangan lupa untuk
lihat artikel lainnya tentang JS/JQUERY.
Kalau kamu suka dengan artikel ini silakan kamu share artikel ini. dan
bila ada kesalahan pengetikan,Kritik,Saran . Silakan kamu komentar dibawah yaa
. Semoga bermanfaat :)
Tidak ada komentar untuk "Cara mengkonvert sebuah file HTML Ke file PDF"
Posting Komentar