Membuat Fungsi Convert to PDF dengan Javascript
Tak kalah urgen dan menarik bahwa bahasa pemrogramman Javascript yaitu bahasa pemrogramman yang powerfull, dan gampang dipelajari, banyak sekali desain desain web dan program program yang menggunakan pemrogramman ini, bagus dari sisi Front-end maupun back-end. kali ini saya akan menjelaskan bagaimana cara Membuat Fungsi Convert to PDF dengan Javascript.
Pastinya manfaat Convert to PDF ini betul-betul lah urgen, bila mana kita akan menjalankan unduh suatu dokumen atau data tapi data tersebut masih berbentuk laman pada arti masih HTML code, nah bagi mensiasatinya kita disini akan belajar cara bagaimana Membuat Fungsi Convert to PDF dengan Javascript tersebut. oke seketika saja kita praktekan yah guys.
pertama-tama kalian ketikan deh kode HTMl berikut dan beri nama dengan nama index.html
index.html
<html>
<head>
<meta charset=UTF-8>
<title> Rubah ke PDF </title>
<link rel =stylesheet href =style.css type = text/css>
</head>
<body>
<div class =container>
<div id =konten>
<h2> Judul 1 </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>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias quam accusantium incidunt nulla unde consectetur. Assumenda id est similique iure sint labore aut nesciunt, velit dolores! Quae voluptatem consectetur cupiditate. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis nisi, nam, sint nobis in nulla praesentium necessitatibus, quis adipisci minus culpa perspiciatis accusantium asperiores at. Necessitatibus ipsum consequuntur, cumque ex! </p>
</div>
<div id =editor> </div>
<button id =change> Rubah ke PDF </button>
</div>
</body>
</html>
tambahkan code javascript dan library jquery dan jspdf berikut setelah tag </div> terakhir.
<!–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;
}
};
$(‘#change’).click(function () {
doc.fromHTML($(‘#konten’).html(), 15, 15, {
‘width’: 170,
‘elementHandlers’: specialElementHandlers
});
doc.save(‘contoh.pdf’);
});
</script>
setelah itu bikin style css agar terlihat menarik. beri nama file dengan nama style.css.
style.css
.container {
width: 850px;
margin: auto;
border: 2px solid #123;
padding: 20px;
}
#change {
background: #123;
border: 2px solid #123;
border-radius: 1px;
padding: 10px;
color: #fff;
font-weight: bold;
}
#change:hover {
background: #fff;
color: #123;
}penampakan nya seperti di bawah ini guys.
dan bila kalian tekan tombol Rubah ke PDF karenanya file HTML tersebut akan tersimpan dengan format PDF. di bawah hasilnya.
sekianlah panduan Membuat Fungsi Convert to PDF dengan Javascript, semoga bermanfaat… 😀
Sumber https://kursuswebsite.org
