Hasilkan PDF dari HTML dengan JavaScript dan contohnya

Programming

Terakhir diubah pada 21 Juni 2022.

Menghasilkan PDF dari HTML di browser adalah salah satu alat yang diperlukan. Ada banyak solusi hosting yang menghasilkan PDF online dari sumber yang dikirimkan.

Saat menggunakan alat online, fitur yang diperlukan tidak tersedia dengan satu alat. Ketika pengguna mengandalkan alat online, mereka harus mempertaruhkan sebagian dari kebutuhan mereka.

Tetapi pengembang seperti kami tidak perlu berkompromi. Kami dapat membuat alat khusus untuk menghasilkan PDF dari HTML saja.

Solusi cepat

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

JavaScript ini memungkinkan browser untuk mencetak. Ini kemudian menyediakan 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 implementasi pembuatan PDF 🙂

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

Ada perpustakaan populer di pasar untuk membuat alat produksi PDF untuk suatu aplikasi.

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

Pustaka yang ada untuk menghasilkan PDF dari HTML

Bagian ini mencantumkan pustaka yang digunakan untuk menghasilkan PDF dari HTML dalam artikel ini. Kode ini menghubungkan contoh sampel berikut untuk menempatkan Anda di tempat yang tepat.

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

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

1. HTML ke PDF

Metode library HTML to pdf adalah cara untuk menghasilkan PDF dari HTML. Ini adalah proses dua langkah untuk mendapatkan output PDF standar.

Pertama, dapatkan alamat CDN perpustakaan ini dari sumber yang memiliki reputasi baik. Kemudian ikuti dua langkah ini untuk mendapatkan file PDF keluaran.

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

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

Hasilkan PDF dari siklus hidup html

Contoh 1: Buat 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: Berikan opsi perpustakaan untuk mengganti default

Tidak seperti contoh di atas, ia mengirimkan serangkaian opsi untuk menghasilkan PDF dari HTML. Membatalkan nama file default, margin, arah, dan default lainnya 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, opsi JSON disediakan, seperti:

html2pdf(pdfContent, optionArray);

2. jsPDF

Untuk menghasilkan PDF dari HTML, beberapa perpustakaan perlu mendefinisikan dokumen bookmark. jsPDF populer karena kemampuannya untuk menerima input HTML dalam format apa pun.

Misalnya, ia dapat menerima HTML dalam format berikut.

  1. markup HTML
  2. Data masukan file HTML
  3. Objek elemen HTML dengan referensi pemilih.

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

Contoh ini memberikan referensi untuk menggunakan jsPDF untuk menghasilkan PDF dari format HTML. Ini berisi sumber template eksternal dalam wadah UI.

JavaScript memetakan pengontrol acara ke tombol “Hasilkan PDF” dalam format HTML.

Mengklik tombol memulai skrip jsPDF dengan spesifikasi PDF yang sesuai. Menggunakan manajemen hsml () dari perpustakaan jsPDF. tp menghasilkan PDF dari objek HTML yang disediakan sebagai argumen.

Handler ini mendefinisikan fungsi panggilan balik yang mengeksekusi konversi HTML ke PDF. Dokumen ini menyimpan atau membuka PDF yang dihasilkan sebagai tanggapan atas panggilan.

Skrip ini menggunakan URL CDN jsPDF. Jika Anda ingin mengunduh jsPDF ini, dokumentasi resmi berisi perintah npm untuk menginstal perpustakaan ini.

<!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: Buat PDF multi-halaman dari halaman HTML

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

Contoh ini adalah untuk menghasilkan dokumen multi-halaman dari HTML panjang ke format PDF.

Menggunakan pengontrol halaman seperti jsPDF Tambah halamankan setHalamankan sisipkanHalaman dan banyak lagi.

Menghitung tinggi dan lebar konten halaman PDF dan membagi konten sumber HTML. Membuat cuplikan konten halaman dari markup HTML.

Menghitung total halaman untuk pagination dari potongan-potongan terpisah dari HTML ke dokumen PDF multi-halaman. partikel untuk objek langsung Tambah halaman () Membuat halaman sampel untuk menampilkan konten halaman secara berkeping-keping.

Loop ini 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 versi terbaru yang sesuai. Kemudian, sebelum menjalankan perintah di terminal, instal perpustakaan ini.

Perlu menyediakan satu Hapus sumber HTML Untuk membuat keluaran PDF

Setelah terinstal, tambahkan jalur perpustakaan ke jalur kelas sistem. Kemudian, jalankan perintah berikut.

wkhtmltopdf sanitised_html_source_path output.pdf

Cara terbaik untuk membaca konten halaman jarak jauh adalah dengan menghapus HTML. Kemudian tulis konten yang telah dihapus dalam HTML lokal untuk diteruskan ke generator PDF. PHP cURL lebih baik untuk membaca konten jarak jauh daripada 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 urutan penginstalan pustaka ini di folder vendor Anda.

composer require mikehaertl/phpwkhtmltopdf

Contoh penggunaan sederhana ini mungkin untuk memulai dengan pustaka PHP ini untuk menghasilkan PDF dari HTML.

<?php
use mikehaertl\wkhtmlto\Pdf;

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

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

4. pdfmake

partikel untuk objek langsung pdfmake Pustaka 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. Dokumen memiliki metode alternatif untuk menginstal dan mengintegrasikan perpustakaan.

Misalnya, dia memberi npm Perintah untuk mengunduh node_modules dengan dependensi yang diperlukan.

Integrasi sisi pelanggan

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

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. Foto-foto

HTML berisi judul, teks dan konten gambar. Objek docDefinition dibuat dengan konten elemen HTML ini.

Gambar disajikan sebagai data biner terenkripsi. Dalam contoh ini, JavaScript getDataUrl() Mengonversi gambar menjadi URL data biner.

Kode pengontrol pdfmake.createPDF() kemudian menghasilkan PDF dari HTML. Kode berikut membuka output HTML ke PDF di halaman browser. Pustaka pdfmake juga memungkinkan Anda 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>


Hasil

Oleh karena itu, kami telah melihat berbagai cara untuk menghasilkan PDF dari kode sumber atau file HTML. Saya harap contoh penggunaan perpustakaan memberikan opsi untuk mengaktifkan produksi PDF.

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

Kembali ke atas


Source link

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan.