Cara Mengubah HTML ke PDF dengan Javascript

December 25, 2023

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

const button = document.getElementById('download-button'); mengambil tombol download
margin: 15 Jarak margin pdf
filename: 'myfile.pdf' nama file pdf yang akan di download
type: 'jpeg' tipe file pdf
quality: 0.98 kualitas file pdf
scale: 2 skala file pdf
unit: 'mm' satuan ukuran yang dipakai
format: 'letter' ukuran kertas yang dipakai
orientation: 'portrait' orientasi yang dipakai
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!

Nrzmn December 25, 2023