Cara Mengubah HTML ke PDF dengan Javascript

By On

Cara Mengubah HTML ke PDF dengan Javascript

Dalam era digital yang semakin berkembang, kebutuhan untuk mengonversi konten web HTML menjadi format dokumen yang mudah dibagikan seperti PDF semakin meningkat. Salah satu cara yang efektif untuk mengkonversi HTML ke PDF adalah dengan menggunakan JavaScript. Dalam artikel ini, saya akan membahas tentang cara mengubah HTML ke PDF dengan menggunakan JavaScript, cara ini juga membuka pintu bagi pengetahuan baru dan solusi praktis dalam mengelola konten online.

Dalam artikel kali ini saya akan menggunkan salah satu library javascript paling simple untuk mengkonversi HTML ke Javascript, yaitu html2pdf.js.

html2pdf.js mengonversi halaman web atau elemen apa pun menjadi PDF yang dapat dicetak sepenuhnya di sisi klien menggunakan html2canvas dan jsPDF.

Mulai

Langkah awal untuk memulai menggunakan library ini adalah dengan memanggil  CDN library html2pdf.js dengan script berikut:
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js" integrity="sha512-GsLlZN/3F2ErC5ifS5QtgpiJtWd43JWSuIgh7mbzZ8zBps+dvLusV+eNQATqgA/HdeKFVgA5v3S/cIrLF7QnIg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

ataupun menggunkan versi RAW yang dapat di download disini, dan memasangnya seperti berikut:
<script src="html2pdf.bundle.min.js"></script>

Penggunaan

Pertama buatlah halaman yang akan diubah menjadi PDF, seperti ini:
<div id="print">
	<h1>Selamat Datang di Contoh HTML ke PDF</h1>
    <p>Ini adalah contoh halaman HTML sederhana yang akan diubah menjadi file PDF menggunakan JavaScript.</p>
</div>

Kemudian buatlah tombol download yang akan digunakan untuk mengubah file html ke pdf:
<button id="download-button">Download PDF</button>

Sekarang mari kita konfigurasikan library-nya dengan javascript seperti ini:
<script>
const button = document.getElementById('download-button');
var opt = {
	margin: 15,
	filename: 'myfile.pdf',
	image: {
		type: 'jpeg',
		quality: 0.98
	},
	html2canvas: {
		scale: 2
	},
	jsPDF: {
		unit: 'mm',
		format: 'letter',
		orientation: 'portrait'
	}
};

function generatePDF() {
	const element = document.getElementById('print');
	html2pdf().set(opt).from(element).save();
}

button.addEventListener('click', generatePDF);
</script>

Saya akan menjelaskan beberapa fungsi script konfigurasi diatas
  1. const button = document.getElementById('download-button'); mengambil tombol download
  2. margin: 15 Jarak margin pdf
  3. filename: 'myfile.pdf' nama file pdf yang akan di download
  4. type: 'jpeg' tipe file pdf
  5. quality: 0.98 kualitas file pdf
  6. scale: 2 skala file pdf
  7. unit: 'mm' satuan ukuran yang dipakai
  8. format: 'letter' ukuran kertas yang dipakai
  9. orientation: 'portrait' orientasi yang dipakai
  10. const element = document.getElementById('print'); nama id elemen HTML yang akan diubah jadi PDF

Untuk dokumentasi lengkap cara penggunaan library ini bisa dibaca di sini https://ekoopmans.github.io/html2pdf.js/

Untuk script fullnya seperti ini:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contoh HTML ke PDF</title>
    <!-- Tambahkan referensi ke library html2pdf.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js" integrity="sha512-GsLlZN/3F2ErC5ifS5QtgpiJtWd43JWSuIgh7mbzZ8zBps+dvLusV+eNQATqgA/HdeKFVgA5v3S/cIrLF7QnIg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>

    <div id="print">
        <h1>Selamat Datang di Contoh HTML ke PDF</h1>
        <p>Ini adalah contoh halaman HTML sederhana yang akan diubah menjadi file PDF menggunakan JavaScript.</p>
    </div>

    <!-- Tombol untuk memicu fungsi pembuatan PDF -->
    <button id="download-button">Download PDF</button>

<script>
const button = document.getElementById('download-button');
var opt = {
	margin: 15,
	filename: 'myfile.pdf',
	image: {
		type: 'jpeg',
		quality: 0.98
	},
	html2canvas: {
		scale: 2
	},
	jsPDF: {
		unit: 'mm',
		format: 'letter',
		orientation: 'portrait'
	}
};

function generatePDF() {

	const element = document.getElementById('print');

	html2pdf().set(opt).from(element).save();
}

button.addEventListener('click', generatePDF);
</script>

</body>
</html>

Dan untuk contoh dokumen PDF yang berhasil dikonversi akan seperti ini:

 

Cara ini merupakan cara yang paling mudah yang saya gunakan, semoga tutorial kali ini bisa teman-teman pahami.

Terimakasih sudah membaca!

Komentar akan di moderasi dahulu