Mengubah HTML menjadi PDF Multi-halaman menggunakan pustaka JavaScript

oleh Vincy. Terakhir diubah pada 4 Juni 2021.

Membuat PDF melalui coding adalah fungsi penting dalam aplikasi kami. Aplikasi data-centric membutuhkan ini untuk membuat laporan. PDF mungkin memiliki segala jenis data seperti tabel, bagan, grafik gambar, dan lainnya.

Sangat mudah untuk menghasilkan satu halaman PDF dari HTML. Tetapi memecah template UI yang panjang menjadi PDF multi-halaman sedikit membosankan untuk diterapkan.

Ada alat konverter online untuk menghasilkan PDF dari Word, dokumen HTML.

Juga, ada banyak perpustakaan terintegrasi untuk menghasilkan PDF melalui pemrograman. Tapi, contoh ini dengan kode sederhana untuk menghasilkan PDF multi-halaman di sisi klien.

Saya menggunakan perpustakaan JavaScript jsPDF untuk mengonversi HTML ke PDF. Pada contoh sebelumnya, kita telah melihat cara membuat PDF sederhana dengan menggunakan library ini.

Pustaka jsPDF berisi lebih banyak fitur untuk menghasilkan dokumen PDF di sisi klien dengan JavaScript.

Pemisahan Otomatis PDF Multi Halaman

Apa yang ada di dalam?

  1. Tentang contoh ini
  2. Struktur file
  3. Cara untuk membagi sumber HTML ke PDF multi-halaman
  4. Sumber template HTML untuk dikonversi menjadi PDF
  5. Membangun antarmuka dengan template sumber dan kontrol konversi
  6. Mengubah HTML menjadi PDF dalam JavaScript
  7. Output konversi PDF multi-halaman

Tentang contoh ini

Kode contoh adalah untuk mengonversi dokumen sumber HTML menjadi PDF multi-halaman.

HTML input akan menampilkan UI yang panjang di browser. Ini menunjukkan jenis campuran elemen HTML seperti gambar, judul, tautan, dan lainnya.

Kode ini berisi tiga template HTML untuk dimasukkan ke dalam halaman arahan. Pemisahan konten PDF dapat berbasis template atau berbasis konten secara keseluruhan.

Laman landas akan memiliki bidang tarik-turun. Ini memiliki opsi untuk memilih jenis mekanisme pemisahan untuk menghasilkan PDF multi-halaman. Ini berisi kontrol tombol untuk memicu konversi PDF.

Ia menggunakan perpustakaan jsPDF dan dependensinya untuk mengimplementasikan pembuatan PDF. saya menggunakan htmltocanvas ketergantungan untuk menyiapkan kanvas dari tampilan template HTML.

PDF yang dihasilkan akan diunduh dan disimpan dengan menggunakan jsPDF menyimpan tindakan di sisi klien.

Struktur file

Gambar di bawah ini menunjukkan contoh struktur file. Ini berisi template UI sisi klien, aset CSS dan JavaScript, gambar.

Itu index.php adalah rumah yang menyertakan tiga templat HTML dari /Templat/ direktori.

Ini memiliki JavaScript khusus convert.js mengajukan. Ini menginstansiasi perpustakaan js PDF dan memanggil proses pembuatan PDF multi-halaman.

HTML ke File PDF Multi-Halaman

Cara untuk membagi sumber HTML ke PDF multi-halaman

Memecah HTML yang panjang ke beberapa halaman PDF dapat dilakukan dengan dua jenis mekanisme pemisahan.

  1. Pemisahan otomatis dengan mengatur panjang PDF per halaman
  2. Tambahkan potongan HTML ke sumber daya PDF target.

Kode ini menangani kedua metode untuk membagi dokumen menjadi PDF multi-halaman.

Sumber template HTML untuk dikonversi menjadi PDF

Bagian ini menunjukkan tiga template HTML yang dibuat untuk contoh ini. Template ini menampilkan konten menggunakan elemen HTML.

Ini menunjukkan judul, gambar, paragraf, dan wadah kotak yang dibatasi. Ini menunjukkan contoh konten HTML yang ditata dengan CSS. Setelah konversi, gaya ini akan direplikasi dalam PDF multi-halaman keluaran.

Template/html-template.php

<h1>Welcome to visit our event portal</h1>
<img class="banner" src="https://phppot.com/php/converting-html-into-multi-page-pdf-using-javascript-library/event-banner.jpeg" width="100%" height="400px" />
<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>

Template/html-template1.php

<div class="event-detail">
	<h1>Thank you for registering with us.</h1>
	<h2>This is the acknowledgement of your registeration for attending the
		event.</h2>
	<p class="row">
		Event Name:<br />Machine learning introduction for kids
	</p>
	<p class="row">
		Event Date:<br />27 May 2021
	</p>
	<p class="row">
		Time:<br />10:30 AM
	</p>
	<p class="row">
		Venue:<br />AMC Graduate Center,<br>25, AMC Street,<br>New York, USA.
	</p>
	<p class="pdf-content">
		Contact our <a href="https://phppot.com/php/converting-html-into-multi-page-pdf-using-javascript-library/#">Organizers' Team</a> if you need any support.
	</p>
</div>

Template/html-template2.php

<h2>Contact Us</h2>
<p>
	T2, Ruth Isabel Villa<br /> 12, RGT Street,<br /> New york.
</p>

<h2>Contact Numbers</h2>
<p>
	Phone: 8909878.<br /> Fax: 678965.<br /> Mobile: 9878978.
</p>

Membangun antarmuka dengan template sumber dan kontrol konversi

Ini adalah halaman arahan HTML yang mencakup semua file template yang telah kita lihat di bagian terakhir.

Ini menampilkan opsi dropdown untuk memilih mekanisme pemisahan konten HTML.

Ada dua pilihan, pemisahan otomatis dan pemisahan berbasis template. Itu mobil splitting adalah default yang melompat ke halaman berikutnya setelah panjang yang ditentukan tercapai.

Dengan mengklik tombol, itu menghasilkan PDF multi-halaman dan menunjukkan overlay untuk menyimpan dokumen.

index.php

<!doctype html>
<HTML>
<HEAD>
<TITLE>Convert HTML to multi-page Pdf</TITLE>
<link href="https://phppot.com/php/converting-html-into-multi-page-pdf-using-javascript-library/assets/css/style.css" type="text/css" rel="stylesheet" />
</HEAD>
<BODY>
	<div id="container">
		<div class="link-container">
			<select id="convertion-type">
    			<option value="split">Split HTML to Multi-Page PDF</option>
    			<option value="">Add HTML to PDF Page</option>
			</select>
			<button class="btn-convert">Convert
				HTML to PDF</button>
		</div>
		<div class="single-html-block">
			<div id="html-template">
				<?php require_once __DIR__ . '/Template/html-template.php'; ?>
			</div>

			<div id="html-template1">
			<?php require_once __DIR__ . '/Template/html-template1.php'; ?>
			</div>

			<div id="html-template2">
				<?php require_once __DIR__ . '/Template/html-template2.php'; ?>
			</div>

		</div>
	</div>

</BODY>
<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://html2canvas.hertzen.com/dist/html2canvas.js"></script>

<script src="assets/js/convert.js"></script>
</HTML>

assets/css/style.css

body {
	font-family: Arial;
	color: #211a1a;
	font-size: 0.9em;
	margin: 0 auto;
	line-height: 30px;
	max-width: 800px;
}

.heading {
	color: #211a1a;
	font-weight: bold;
	font-size: x-large;
	white-space: nowrap;
	margin: 20px auto;
	text-align: center;
}

#html-template {
	text-align: center;
	margin: 30px 0px 60px 0px; 
}

#html-template1 {
	background: #ffffff;
	padding: 20px;
	border: #E0E0E0 1px solid;
	border-radius: 3px;
}

#container {
	margin: 30px;
}

.btn-convert {
	padding: 10px 20px;
    border-radius: 20px;
    margin: 10px 0px;
    display: inline-block;
    cursor: pointer;
    color: #211c1c;
    background-color: #28a745;
    border: #23943d 1px solid;
}

a {
	color: #007bff;
}

.link-container {
	text-align: right;
}

#html-template2 {
	margin: 30px 0px 60px 0px; 
	padding: 20px;
	border: #E0E0E0 1px solid;
	border-radius: 3px;	
}

#convertion-type {
	border: #1d1d1d 1px solid;
    border-radius: 20px;
    PADDING: 8px 20px;
    margin-right: 15px;
}

.description {
	text-align: justify;
}

Mengubah HTML menjadi PDF dalam JavaScript

JavaScript ini menerapkan pemeriksaan bersyarat pada data formulir. Itu mendapat mekanisme pemisahan yang dipilih dari formulir. Ini memanggil generasi PDF multi-halaman dengan metode yang berbeda.

Itu addHTMLToPDFPage()panggilan metode htmltocanvas dengan menyediakan referensi objek template tertentu.

Itu converHTMLToCanvas() menerima parameter untuk memicu tambah baru halaman dan menyimpan tindakan.

Itu splitHTMLtoMultiPagePDF() metode ini menerapkan pemisahan otomatis pada dokumen PDF. Ini mempersiapkan kanvas gambar dari dokumen HTML. Kemudian ukir kanvas gambar dengan PDF per panjang halaman.

Panjang halaman PDF dan jumlah halaman dihitung. Kemudian, htmltocanvas menggunakannya untuk merender kanvas ke dalam halaman.

assets/js/convert.js

$(document).ready(function(){
	$(".btn-convert").click(function(){
		var convertionType = $("#convertion-type").val();
		if(convertionType == "split") {
			splitHTMLtoMultiPagePDF();
		} else {
			addHTMLToPDFPage();
		}
	});
});

function addHTMLToPDFPage() {

	var doc = new jsPDF('p', 'pt', [$("body").width(), $("body").height()]);
	
	converHTMLToCanvas($("#html-template")[0], doc, false, false);
	
	converHTMLToCanvas($("#html-template1")[0], doc, true, false);
	
	converHTMLToCanvas($("#html-template2")[0], doc, true, true);
}

function converHTMLToCanvas(element, jspdf, enableAddPage, enableSave) {
	html2canvas(element, { allowTaint: true }).then(function(canvas) {
		if(enableAddPage == true) {
			jspdf.addPage($("body").width(), $("body").height());
		}
		
		image = canvas.toDataURL('image/png', 1.0);
		jspdf.addImage(image, 'PNG', 15, 15, $(element).width(), $(element).height()); // A4 sizes
		
		if(enableSave == true) {
			jspdf.save("add-to-multi-page.pdf");
		}
	});
}

function splitHTMLtoMultiPagePDF() {
	var htmlWidth = $(".single-html-block").width();
	var htmlHeight = $(".single-html-block").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($(".single-html-block")[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("split-to-multi-page.pdf");
	});
};

Output konversi PDF multi-halaman

Tangkapan layar ini menunjukkan output PDF. Kita bisa melihat dokumen terbelah berdasarkan template.

Ini menghasilkan PDF dengan memilih mekanisme pemisahan kedua dari dropdown.

Halaman pertama menampilkan template dengan elemen gambar. Halaman kedua dan ketiga menunjukkan tanda terima dan rincian kontak dari template.

Tambahkan Banyak Halaman ke PDF

Kesimpulan

Membuat laporan dalam format PDF adalah fungsi aplikasi yang paling dicari. Untuk dokumen PDF yang sempurna dengan keterbacaan/aksesibilitas layar yang baik.

Jadi, kita telah melihat bagaimana mengubah HTML yang panjang menjadi dokumen PDF multi-halaman. Kami telah menunjukkan opsi kepada pengguna untuk memilih mekanisme pemisahan konten.

Pustaka jsPDF sisi klien dan dependensinya memudahkan pekerjaan untuk menghasilkan PDF. Kami telah mengonversi HTML statis. Sebelumnya, kami juga melihat contoh untuk mengubah data dinamis menjadi PDF menggunakan FPDF.

Saya harap, kode ini akan membantu Anda mempelajari proses konversi ini dengan cepat dan mudah. Mari kita lihat lebih banyak contoh konversi PDF di tutorial mendatang.
Unduh

Kembali ke Atas

[ad_2]
Source link