Cara Membuat Export PDF Dengan JSPDF

Halo teman – teman, kembali lagi di website tips dan trik Dumet School. Pada kesempatan kali ini saya akan memberikan tips tentang Cara Membuat Export PDF Dengan JSPDF dengan jfpdf kita memudahkan kita dalam pembuatan fitur export pdf yang juga pengerjaannya cukup cepat dan tidak sulit.

Terutama pada saat kita membuat export pdf dengan php yang di dalam nya ada image, tentu ada beberapa tahap supaya export berjalan lancar. Namun dengan menggunakan plugin jspdf ini selain cepat, juga dapat kita embed image sekaligus.

Baiklah langsung saja kita buat file dengan format .html, kemudian kita masukan link cdn plugin kita load terlebih dahulu. Kali ini kita hanya menggunakan online saja atau melalui cdn, jika teman – teman ingin menginstall di ofline silahkan download dan save sesuai direktori project teman – teman.

Masukkan link cdn nya

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
	  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.6.0/dom-to-image.min.js" integrity="sha256-c9vxcXyAG4paArQG3xk6DjyW/9aHxai2ef9RpMWO44A=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>

Kemudian kita buat layout nya dengan html css

<body style="padding: 30px 0">
	<div id="body">
		<div id="content2" style="position: relative;">
			<h1>Cara Membuat Export PDF Dengan JSPDF</h1>
			<img src="images.png" />
			<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. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
		</div>
	</div>
	<div style="width:297mm; margin:auto; margin-top: 20px ">
		<button class="btn btn-info" id="downloadPDF" style="background: #0155a4; border-color: #0155a4;">Download</button>
	</div>
</body>

Dan kita berikan css nya

<style type="text/css">
		*{padding: 0; margin: 0}
		#body{
			padding: 10px;
			width: 297mm;
			margin: auto;
		}
		#content2{
			width: 297mm;
		}
	</style>

Yang terakhir kita buat script javscript nya untuk membuat export pdf,

<script type="text/javascript">
$('#downloadPDF').click(function () {
    domtoimage.toPng(document.getElementById('content2'))
        .then(function (blob) {
            var pdf = new jsPDF('l', 'mm', [$('#content2').width(), $('#content2').height()]);

            pdf.addImage(blob, 'PNG', 0, 0, $('#content2').width(), $('#content2').height());
            pdf.save("export.pdf");

            that.options.api.optionsChanged();
        });
});

</script>

Jika sudah simpan dan jalankan pada browsernya, maka hasilnya seperti gambar di bawah ini

Cara Membuat Export PDF Dengan JSPDF

Kemudian kita klik pada tombol download, maka dengan otomatis pdf akan terdownload.

Cara Membuat Export PDF Dengan JSPDF

Bagaimana, sangat mudah bukan. Teman – teman bisa gunakan untuk mempermudah dalam pembuatan laporan pdf nya.

Baik, tentu kita akan berjumpa kembali pada artikel berikutnya. Demikianlah artikel kali ini tentang Cara Membuat Export PDF Dengan JSPDF semoga beranfaat dan terimakasih.

DUMET School Author

DUMET School adalah tempat kursus website, kursus desain grafis, kursus digital marketing, kursus video editing dan kursus mobile apps terbaik di Jakarta dan Depok.

Leave a Reply

Your email address will not be published. Required fields are marked *