Membuat Fungsi Convert to PDF dengan Javascript

Tidak kalah penting dan menarik bahwa bahasa pemrogramman Javascript adalah bahasa pemrogramman yang powerfull, dan mudah dipelajari, banyak sekali desain desain web dan aplikasi aplikasi yang menggunakan pemrogramman ini, baik dari sisi Front-end maupun back-end. kali ini saya akan menjelaskan bagaimana cara Membuat Fungsi Convert to PDF dengan Javascript.

Tentunya fungsi Convert to PDF ini sangat lah penting, bila mana kita akan melakukan download suatu dokumen atau data tapi data tersebut masih berbentuk website dalam arti masih HTML code, nah untuk mensiasatinya kita disini akan belajar cara bagaimana Membuat Fungsi Convert to PDF dengan Javascript tersebut. oke langsung saja kita praktekan yah guys.

pertama 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 buat 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 maka file HTML tersebut akan tersimpan dengan format PDF. di bawah hasilnya.

sekian tutorial Membuat Fungsi Convert to PDF dengan Javascript, semoga bermanfaat… 😀