Hasilkan PDF dari HTML dengan JavaScript dan Contoh

0
(0)

oleh Vincy. Terakhir diubah pada 12 Mei 2022.

Menghasilkan PDF dari HTML di browser adalah salah satu utilitas yang paling dicari. Ada banyak solusi yang dihosting yang menghasilkan PDF online dari sumber yang diposting.

Saat menggunakan alat online, fitur yang diperlukan tidak tersedia dengan satu alat. Pengguna harus mengkompromikan beberapa kebutuhan mereka ketika bergantung pada alat online.

Namun, pengembang seperti kami tidak perlu berkompromi. Kami dapat membuat utilitas khusus untuk menghasilkan PDF dari HTML sendiri.

Solusi cepat

Ada solusi cepat untuk menghasilkan PDF dari halaman HTML. Wizard pencetakan browser memiliki opsi “Simpan sebagai PDF” bersama dengan panel pratinjau.

JavaScript ini memicu tindakan cetak browser. Kemudian, ia memasok bagian tertentu dari HTM untuk dicetak.


<div class="outer-content">
	<div id="pdf-content">
		<h2>PDF Page Title</h2>
		<hr>
		<p>
			How to generate a pdf from the <i>UI content</i> is easy.
		</p>
		<p>
			This describes how to <strong>generate pdf from HTML</strong> using
			programming.
		</p>
	</div>
	<hr>
	<button id="btn-generate">Generate PDF</button>
</div>

<!DOCTYPE html>
<html lang="en">
<body>
	<?php require_once __DIR__ . '/template.html'; ?>
</body>
<script>
	var buttonElement = document.querySelector("#btn-generate");
	buttonElement.addEventListener('click', function() {
		var pdfContent = document.getElementById("pdf-content").innerHTML;
		var windowObject = window.open();

		windowObject.document.write(pdfContent);

		windowObject.print();
		windowObject.close();
	});
</script>
</html>

Saya yakin ini tidak cukup untuk mengklaim bahwa generasi PDF diimplementasikan 🙂

Untuk membuat solusi lengkap untuk menghasilkan PDF dari HTML, kita harus menggunakan perpustakaan.

Ada perpustakaan populer yang tersedia di pasar untuk membangun alat pembuatan PDF untuk suatu aplikasi.

Dalam tutorial ini, kita akan melihat beberapa library teratas yang mendukung pembuatan PDF. Untuk setiap perpustakaan, kita akan melihat langkah-langkah bagaimana untuk integrasi dan pengembangan.

Perpustakaan tersedia untuk Menghasilkan PDF dari HTML

Bagian ini mencantumkan perpustakaan yang digunakan untuk menghasilkan PDF dari HTML dalam artikel ini. Ini menghubungkan kode contoh yang sesuai di bawah ini untuk mendaratkan Anda di tempat yang tepat.

  1. HTML ke PDF
  2. jsPDF
  3. wkHTMLkePDF
  4. pdfmake

Bagian HTML ke pdf dan jspdf memiliki lebih dari satu contoh. Ini untuk mengetahui cara menghasilkan PDF dari HTML yang berisi node atau wadah yang kompleks. Contoh: tabel HTML, galeri gambar dan lain-lain.

1. HTML ke PDF

Metode perpustakaan HTML ke pdf adalah cara untuk menghasilkan PDF dari HTML. Ini adalah proses dua langkah untuk mendapatkan output PDF sederhana.

Pertama, dapatkan URL CDN perpustakaan ini dari sumber asli. Kemudian, ikuti dua langkah ini untuk mendapatkan file PDF keluaran.

  1. Buat instance kelas perpustakaan html ke pdf.
  2. Petakan konten HTML untuk menghasilkan dan menyimpan PDF.

Siklus hidup dasar untuk menghasilkan PDF dari HTML menggunakan perpustakaan ini ditunjukkan pada diagram alur di bawah ini.

hasilkan pdf dari siklus hidup html

Contoh 1: Hasilkan PDF dari HTML yang hanya berisi teks.


<!DOCTYPE html>
<html lang="en">
<head>
<title>Generate PDF from HTML using html to pdf library</title>
<!-- CDN URL - html2pdf library -->
<script
	src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
</head>

<body>
	<?php require_once __DIR__ . '/template.html'; ?>

	<script>
		var buttonElement = document.querySelector("#btn-generate");
		buttonElement.addEventListener('click', function() {
			var pdfContent = document.querySelector("#pdf-content");
			html2pdf().from(pdfContent).save();
		});
	</script>
</body>
</html>

Contoh 2: Menyediakan opsi pustaka untuk mengganti default

Tidak seperti contoh di atas, ia mengirimkan serangkaian opsi untuk menghasilkan PDF dari HTML. Ini menimpa nama file default, margin, orientasi dan lebih banyak default seperti yang ditentukan.


var pdfContent = document.querySelector("#pdf-content");
var optionArray = {
  margin:       10,
  filename:     'output.pdf',
  jsPDF:        { unit: 'in', format: 'letter', orientation: 'portrait' }
};

// html to pdf generation with the reference of PDF worker object
html2pdf().set(optionArray).from(pdfContent).save();


Dalam metode monolitik lama, html2pdf() menerima referensi dan opsi HTML. Untuk menghasilkan PDF dari referensi objek HTML DOM dan opsi JSON disediakan seperti,


html2pdf(pdfContent, optionArray);

2. jsPDF

Untuk menghasilkan PDF dari HTML beberapa perpustakaan memerlukan definisi dokumen dari markup. JsPDF terkenal karena fiturnya untuk mendapatkan input HTML dalam format apa pun.

Misalnya, ia mampu menerima HTML dalam format berikut.

  1. markup HTML.
  2. Data masukan berkas HTML.
  3. Objek elemen HTML dengan referensi penyeleksi.

Contoh 1: Solusi alternatif yang setara untuk menghasilkan PDF dari HTML

Contoh ini membuat referensi penggunaan dasar jsPDF untuk menghasilkan PDF dari template HTML. Ini termasuk sumber template eksternal dalam wadah UI.

JavaScript memetakan pengendali peristiwa ke tombol “Hasilkan PDF” yang ditemukan di template HTML.

Saat mengklik tombol, skrip memulai jsPDF dengan spesifikasi PDF yang sesuai. Ini menggunakan .html() penanganan perpustakaan jsPDF tp menghasilkan PDF dari objek HTML yang disediakan sebagai argumen.

Hander ini mendefinisikan fungsi panggilan balik yang mengeksekusi konversi HTML ke PDF. Ini menyimpan atau membuka dokumen PDF yang dihasilkan dalam panggilan balik.


<!DOCTYPE html>
<html>
<head>
<title>jsPDF Example</title>
<script
	src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
	src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script
	src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
</head>
<body>
	<?php require_once __DIR__ . '/template.html'; ?>

	<script>
		var buttonElement = document.querySelector("#btn-generate");
		buttonElement.addEventListener('click', function() {
			const { jsPDF } = window.jspdf;
			var doc = new jsPDF("p", "pt", 'a4');
			var pdfContent = document.querySelector("#pdf-content");

			// Generate PDF from HTML using right id-selector
			doc.html(pdfContent, {
				callback: function(doc) {
				doc.save("download.pdf");
				},
				x: 10,
				y: 19
			});
		});
	</script>
</body>
</html>

Contoh 2: Hasilkan PDF multihalaman dari halaman HTML

Pustaka jsPDF adalah salah satu pustaka terbaik yang digunakan untuk menghasilkan PDF dari HTML di sisi klien. Kami telah melihat lebih banyak contoh di artikel sebelumnya.

Contoh ini adalah untuk menghasilkan dokumen multihalaman dari format HTML ke PDF yang panjang.

Ini menggunakan penangan halaman jsPDF seperti tambah halaman, setHalaman, sisipkanHalaman dan banyak lagi.

Ini menghitung tinggi dan lebar konten halaman PDF dan membagi konten sumber HTML. Itu membuat potongan konten halaman dari markup HTML.

Ini menghitung total halaman untuk membuat halaman membagi potongan HTML ke dokumen multi-halaman PDF. Itu tambah halaman() menghasilkan instance halaman untuk merender potongan konten halaman ke dalamnya.

Ini loop melalui proses yang sama untuk menghasilkan PDF dari HTML yang berisi konten panjang.


<!doctype html>
<HTML>
<HEAD>
<TITLE>Generate multi-page PDF from HTML - jsPDF</TITLE>
<script src="https://code.jquery.com/jquery-2.1.3.js"></script>
<script
	src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.min.js"></script>
<script
	src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<style>
.description {
    font-size: 2em;
    line-height: 4;
}
</style>
</HEAD>
<BODY>
	<div class="outer-content">
		<div id="pdf-content">

			<img src="cherry.jpeg" />
			<p class="description">Donec id leo quis felis vehicula bibendum sit amet ut tellus. Sed
	sagittis aliquet rhoncus. Pellentesque vulputate nunc ultricies,
	egestas augue ac, ullamcorper dui. Etiam diam mauris, molestie in purus
	a, venenatis pretium leo. Sed id metus eleifend, scelerisque neque id,
	posuere arcu. Nunc cursus et dui quis fringilla. In in turpis feugiat
	diam porttitor tempus. In hendrerit diam dolor, id pellentesque ante
	volutpat a. Nam tortor sapien, semper ut justo et, accumsan imperdiet
	sem. Sed euismod nunc vitae dolor porttitor ullamcorper. Donec sed
	lacinia dui. Nunc sed suscipit erat. Phasellus euismod ultrices velit,
	hendrerit tempor diam elementum ut.</p>
	
			<hr>
		</div>

		<button id="btn-generate">Generate PDF</button>
	</div>

</BODY>
<script>
$(document).ready(function(){
	$("#btn-generate").click(function(){
		var htmlWidth = $("#pdf-content").width();
		var htmlHeight = $("#pdf-content").height();
		var pdfWidth = htmlWidth + (15 * 2);
		var pdfHeight = (pdfWidth * 1.5) + (15 * 2);
		
		var doc = new jsPDF('p', 'pt', [pdfWidth, pdfHeight]);
	
		var pageCount = Math.ceil(htmlHeight / pdfHeight) - 1;
	
	
		html2canvas($("#pdf-content")[0], { allowTaint: true }).then(function(canvas) {
			canvas.getContext('2d');
	
			var image = canvas.toDataURL("image/png", 1.0);
			doc.addImage(image, 'PNG', 15, 15, htmlWidth, htmlHeight);
	
	
			for (var i = 1; i <= pageCount; i++) {
				doc.addPage(pdfWidth, pdfHeight);
				doc.addImage(image, 'PNG', 15, -(pdfHeight * i)+15, htmlWidth, htmlHeight);
			}
			
		doc.save("output.pdf");
		});
	});
});
</script>
</HTML>

hasilkan pdf dari keluaran html

3. wkHTMLtoPDF

Ini adalah alat baris perintah untuk menghasilkan PDF dari HTML. Temukan rilis terbaru yang sesuai. Kemudian, instal perpustakaan ini sebelum menjalankan perintah di terminal.

Ini membutuhkan penyediaan sumber HTML yang disanitasi untuk membuat keluaran PDF.

Setelah instalasi, tambahkan path library ke classpath sistem. Kemudian, jalankan perintah berikut.


wkhtmltopdf sanitised_html_source_path output.pdf

Praktik terbaik adalah membaca konten halaman jarak jauh dan membersihkan HTML. Kemudian tulis konten yang disanitasi ke dalam HTML lokal untuk diteruskan ke perintah pembuatan PDF. Posting PHP cURL akan lebih baik untuk membaca konten jarak jauh dibandingkan dengan file_get_contents().

Ini menyediakan perpustakaan C untuk membiasakan diri melalui pemrograman.

Jika Anda ingin menjalankan perintah melalui program, fungsi PHP exec() dapat membantu.

Ada antarmuka pihak ketiga untuk menghasilkan PDF dari HTML menggunakan wkHTMLtoPDF. Kunjungi halaman Github untuk menginstal pustaka PHP yang digunakan untuk konten HTML ke PDF.

Kode ini menunjukkan perintah untuk menginstal perpustakaan ini ke direktori vendor Anda.


composer require mikehaertl/phpwkhtmltopdf

Contoh penggunaan sederhana ini dapat dimulai dengan pustaka PHP ini untuk menghasilkan PDF dari HTML.


<?php
use mikehaertlwkhtmltoPdf;

$pdf = new Pdf('html-source-file.html');

if (!$pdf->saveAs('output.pdf')) {
    $error = $pdf->getError();
    // return error to the request handler
}

4. pdfmake

Itu pdfmake perpustakaan memiliki integrasi sisi klien dan sisi server. Kedua metode menghasilkan PDF dari HTML dengan mengakses konten elemen dari JavaScript.

Instalasi

Contoh ini menggunakan URL CDN pdfmake untuk mengimpor dependensi. Dokumentasi memiliki metode alternatif untuk menginstal dan mengintegrasikan perpustakaan.

Misalnya memberikan npm perintah untuk mengunduh node_modules dengan dependensi yang diperlukan.

Integrasi sisi klien

Contoh ini menggunakan metode sisi klien pdfmake untuk menghasilkan PDF dari objek HTML.

Itu mengakses konten elemen HTML dari JavaScript dan menyiapkan objek definisi dokumen.

Definisi dokumen dapat menyediakan jenis konten berikut.

  1. Teks,
  2. Teks multi-kolom,
  3. Gaya,
  4. Gambar-gambar

HTML berisi heading, teks, dan konten gambar. Objek docDefinition dibangun dengan konten elemen HTML ini.

Gambar akan diberikan sebagai data biner yang disandikan. Dalam contoh ini, JavaScript getDataUrl() mengonversi gambar menjadi URL data biner.

Kemudian kode handler pdfmake.createPDF() menghasilkan PDF dari HTML. Kode di bawah ini membuka output HTML ke PDF di layar browser. Pustaka pdfmake juga memungkinkan untuk mencetak, dan mengunduh dokumen PDF.


<!DOCTYPE html>
<html>
<head>
<title>PDFMake Example</title>
<script
	src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.5/pdfmake.min.js"></script>
<script
	src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.5/vfs_fonts.min.js"></script>
</head>
<body>
	<div class="outer-content">
		<h2 id="heading">PDF Page Title</h2>
		<div id="pdf-content">How to generate a pdf from the UI content description and example.
		</div>
		<img src="cherry.jpeg" id="image-preview" />
		<hr>
		<button id="btn-generate">Generate PDF</button>
	</div>

	<script>
		var buttonElement = document.querySelector("#btn-generate");
		buttonElement.addEventListener('click', function() {
			var pdfHeading = document.querySelector("#heading").innerText;
			var pdfContent = document.querySelector("#pdf-content").innerText;
            var pdfImage = getDataUrl(document.querySelector("#image-preview"));
            var docDefinition = {
            	content: [
            		{ 
            			text: pdfHeading,
            			style: 'heading'
            		},
            		{ 
            			text: pdfContent,
            			style: 'vspace'
            		},
            		{ 
            			image: pdfImage
            		}
            	],
            	styles: {
            		vspace: {
            			lineHeight: 3
            		},
            		heading: {
            			fontSize: 18,
            			lineHeight: 2
            		}
            	}
            };
            pdfMake.createPdf(docDefinition).open();
		});
		
		function getDataUrl(imgSource) {
           const canvas = document.createElement('canvas');
           const context = canvas.getContext('2d');
           canvas.width = imgSource.width;
           canvas.height = imgSource.height;
           context.drawImage(imgSource, 0, 0);
           return canvas.toDataURL('image/jpeg');
        }
	</script>
</body>
</html>


Kesimpulan

Jadi, kita telah melihat berbagai metode untuk menghasilkan PDF dari kode sumber atau file HTML. Saya harap contoh penggunaan perpustakaan dapat memberikan pilihan untuk mengaktifkan pembuatan PDF.

Bagikan pemikiran Anda tentang konsep pembuatan PDF yang telah kami lihat. Juga, bagikan komentar Anda tentang kode contoh untuk menghasilkan PDF dari HTML.

Kembali ke Atas


Source link

How useful was this post?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.