PHP
Hasilkan PDF dari HTML dengan JavaScript dan Contoh
Aug
oleh Vincy. Terakhir diubah pada 15 Juli 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. Kita 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 perpustakaan 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.
- HTML ke PDF
- jsPDF
- wkHTMLtoPDF
- 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 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 standar.
Pertama, dapatkan URL CDN perpustakaan ini dari sumber otentik. Kemudian, ikuti dua langkah ini untuk mendapatkan file PDF keluaran.
- Buat instance kelas perpustakaan html ke pdf.
- 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.
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.
- markup HTML.
- Data masukan berkas HTML.
- 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 event handler ke tombol “Generate PDF” yang ada 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.
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: 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>
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.
Ini mengakses konten elemen HTML dari JavaScript dan menyiapkan objek definisi dokumen.
Definisi dokumen dapat menyediakan jenis konten berikut.
- Teks,
- Teks multi-kolom,
- Gaya,
- Gambar-gambar
HTML berisi judul, 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() mengubah 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 kita lihat. Juga, bagikan komentar Anda tentang kode contoh untuk menghasilkan PDF dari HTML.
Kembali ke Atas
Source link
