Editor Downcodes memberi Anda tutorial tentang cara menggunakan JavaScript dan PHP untuk mengubah halaman web HTML menjadi file PDF. Artikel ini akan merinci dua metode: menggunakan perpustakaan JavaScript jsPDF dan menggunakan perpustakaan PHP TCPDF atau mPDF. Pustaka jsPDF memungkinkan konversi langsung di sisi klien, sedangkan pustaka PHP memerlukan pemrosesan di sisi server. Kami akan fokus menjelaskan cara menggunakan jsPDF dan memberikan contoh kode, mencakup langkah-langkah memperkenalkan perpustakaan, memproses konten HTML, membuat instance PDF, menyesuaikan format, menyimpan file, dll. Kami juga akan memperkenalkan secara singkat metode konversi dan fungsi lanjutan menggunakan PHP . Implementasi, seperti menambahkan gambar, watermark, header dan footer, dll. Apa pun metode yang Anda pilih, artikel ini akan membantu Anda menyelesaikan konversi HTML ke PDF secara efisien.
Mengonversi halaman web ke PDF adalah persyaratan umum, yang memungkinkan kami menyimpan konten situs web dalam format tetap. Penggunaan JavaScript atau PHP untuk mengubah halaman web HTML ke PDF meliputi: menggunakan pustaka JavaScript dan menggunakan pustaka PHP. Di antara alat konversi ini, pustaka JavaScript seperti jsPDF dan html2pdf.js sangat populer, sedangkan PHP memiliki pustaka seperti TCPDF atau mPDF. Kami akan fokus menggunakan pustaka jsPDF JavaScript untuk mencapai konversi. Hal ini karena pustaka jsPDF menyediakan dukungan klien yang baik, mudah dioperasikan, dan dapat menyelesaikan konversi tanpa berkomunikasi dengan server.
jsPDF adalah perpustakaan yang ditulis dalam JavaScript murni yang bekerja di lingkungan front-end dan tidak memerlukan dukungan back-end. Untuk menggunakan jsPDF, Anda harus memasukkan file perpustakaannya ke dalam proyek terlebih dahulu. Anda dapat menginstalnya dari repositori GitHub jsPDF atau melalui npm. Setelah perpustakaan jsPDF diperkenalkan, Anda dapat menggunakan kode JavaScript untuk membaca konten HTML dan menggunakan API yang disediakan oleh jsPDF untuk menghasilkan file PDF.
Untuk memulai proses konversi, Anda harus mengimpor jsPDF terlebih dahulu ke halaman web Anda. Anda dapat langsung mengunduh perpustakaan jsPDF dan meneruskannya
Atau instal menggunakan npm:
npm instal jspdf
Kemudian impor ke file JavaScript Anda:
impor { jsPDF } dari jspdf;
Sebelum membuat PDF, Anda mungkin ingin memodifikasi HTML untuk memastikan bahwa file PDF yang dikonversi memenuhi kebutuhan Anda. Misalnya, Anda mungkin perlu menyembunyikan elemen halaman tertentu dan hanya menyimpan konten utama.
// Dapatkan elemen HTML yang perlu dikonversi
elemen const = document.getElementById('konten-ke-pdf');
// Memodifikasi konten HTML, seperti menyembunyikan elemen yang tidak diperlukan
element.querySelectorAll('.no-print').forEach(element => elemen.style.display = 'none');
Buat instance jsPDF baru dan gunakan API yang disediakan oleh jsPDF untuk membaca elemen HTML dan mengubahnya menjadi format PDF.
const doc = jsPDF baru();
// Asumsikan Anda ingin halaman dirender dalam PDF ukuran A4
doc.html(dokumen.body, {
panggilan balik: fungsi (dokumen) {
doc.save('halaman web.pdf');
},
x: 10,
kamu: 10,
lebar: 190,
lebar jendela: dokumen.body.scrollWidth
});
Selama proses konversi, Anda mungkin perlu menyesuaikan format dan tata letak PDF, seperti ukuran halaman, margin, atau apakah Anda perlu mencetak dalam orientasi lanskap, dll.
const doc = jsPDF baru({
orientasi: 'p', // potret
satuan: 'mm', // Satuannya adalah milimeter
format: 'a4', // Format kertas A4
});
Setelah konten HTML dikonversi ke PDF, Anda dapat menggunakan metode save() untuk menyimpan file, atau memproses data PDF yang dihasilkan.
doc.save('converted-webpage.pdf'); // Simpan file PDF
Jika Anda ingin melakukan konversi HTML ke PDF di sisi server, Anda dapat menggunakan perpustakaan PHP seperti TCPDF atau mPDF. Untuk menggunakan perpustakaan ini, Anda harus terlebih dahulu memperkenalkannya ke dalam lingkungan PHP Anda, biasanya melalui Komposer.
komposer memerlukan tecnickcom/tcpdf
Kemudian buat objek TCPDF di skrip PHP dan gunakan metode yang disediakan oleh objek tersebut untuk mengubah kode HTML ke format PDF.
require_once('tcpdf_include.php');
//Buat dokumen PDF baru
$pdf = TCPDF baru(PDF_PAGE_ORIENTATION, PDF_UNIT, PDF_PAGE_FORMAT, benar, 'UTF-8', salah);
//Mengatur informasi dokumen
$pdf->SetCreator(PDF_CREATOR);
$pdf->SetAuthor('Nama Anda');
$pdf->SetTitle('Contoh TCPD 001');
$pdf->SetSubject('Tutorial TCPD');
$pdf->SetKeywords('TCPDF, PDF, contoh, tes, panduan');
//Tambahkan halaman
$pdf->TambahkanHalaman();
//Setel konten
$html = '
$pdf->writeHTML($html, benar, salah, benar, salah, '');
// Keluaran PDF
$pdf->Keluaran('example_001.pdf', 'Saya');
Saat menangani konversi PDF, Anda mungkin ingin mempertimbangkan gaya dan font dalam dokumen untuk memastikan bahwa file PDF yang dihasilkan mempertahankan gaya konten web.
JsPDF dan TCPDF menyediakan dukungan dasar untuk gaya. Anda dapat menggunakan gaya CSS secara langsung dalam HTML atau menerapkan gaya saat membuat PDF. Namun, karena PDF tidak ditampilkan sama persis dengan halaman web, mungkin ada sedikit perbedaan. Untuk jsPDF, dukungan untuk CSS dapat ditingkatkan melalui plug-in. Dengan TCPDF, Anda perlu menyesuaikan CSS dengan hati-hati untuk mendapatkan hasil terbaik.
doc.setFont(helvetica);
doc.setFontStyle(tebal);
doc.setFontSize(16);
doc.text(Halo Dunia!, 10, 10);
$html = '
$pdf->writeHTML($html, benar, salah, benar, salah, '');
Selama proses konversi PDF, Anda mungkin juga perlu menangani beberapa fungsi lanjutan, seperti menambahkan header dan footer, tanda air, tabel, gambar, dll. Fitur-fitur ini umumnya didukung di perpustakaan jsPDF dan TCPDF, tetapi penerapannya sedikit berbeda. Sesuai dengan kebutuhan spesifik, Anda dapat memanggil fungsi perpustakaan yang sesuai untuk mencapainya.
jsPDF menyediakan berbagai metode untuk meningkatkan fungsionalitas PDF, seperti addImage() untuk menambahkan gambar, setProperties() untuk mengatur properti dokumen, dll.
// tambahkan gambar
doc.addImage(imgData, 'JPEG', 15, 40, 180, 160);
TCPDF juga menyediakan fungsi canggih untuk menangani konten PDF tingkat lanjut.
// Tetapkan tajuk
$pdf->setHeaderData('', 0, 'Judul', 'Header', array(0,64,255), array(0,64,128));
$pdf->setHeaderFont(Array('helvetica', '', 10));
//Tambahkan tanda air
$pdf->SetAlpha(0,3);
$pdf->Gambar('tanda air.png', 25, 110, 160, 40, '', '', '', salah, 300, '', salah, salah, 0);
//Kembalikan transparansi penuh
$pdf->SetAlpha(1);
Singkatnya, menggunakan JavaScript atau PHP untuk mengonversi halaman web HTML ke file PDF melibatkan pemilihan perpustakaan yang sesuai, pemrosesan konten halaman web, penyesuaian tata letak PDF, dan penggunaan fungsi lanjutan yang disediakan oleh perpustakaan untuk mencapai persyaratan penyesuaian yang kompleks. Terlepas dari apakah Anda memilih jsPDF di sisi klien atau TCPDF di sisi server, langkah dan metode implementasi dasarnya serupa. Selama implementasi spesifik, alat dan metode yang paling tepat perlu dipilih berdasarkan kebutuhan aktual dan lingkungan proyek.
1. Bagaimana cara mengonversi halaman web HTML ke PDF menggunakan JavaScript?
Anda dapat menggunakan perpustakaan jsPDF untuk mengonversi halaman web HTML ke PDF. Pustaka ini memungkinkan Anda menghasilkan file PDF dalam JavaScript front-end. Anda dapat melakukan ini dengan merender konten elemen HTML ke Canvas dan kemudian menggunakan jsPDF untuk mengonversi Canvas menjadi file PDF. Dengan cara ini Anda dapat menghasilkan file PDF langsung di klien.2. Bagaimana cara mengubah halaman web HTML ke PDF menggunakan PHP?
Cara yang lebih umum untuk mengonversi halaman web HTML ke PDF menggunakan PHP adalah dengan menggunakan perpustakaan TCPDF atau mPDF. Kedua perpustakaan dapat menghasilkan file PDF di sisi server. Anda hanya perlu menginstal perpustakaan yang sesuai di server, dan kemudian menggunakan PHP untuk merender halaman web HTML menjadi file PDF.3. Selain jsPDF, TCPDF dan mPDF, alat apa lagi yang dapat mengubah halaman web HTML ke PDF?
Selain jsPDF, TCPDF, dan mPDF yang umum, ada alat lain yang dapat mengubah halaman web HTML ke PDF, seperti: wkhtmltopdf, PhantomJS, dll. Semua alat ini dapat berjalan di latar belakang untuk merender halaman web HTML menjadi file PDF. Anda dapat memilih alat yang paling sesuai dengan kebutuhan Anda untuk mewujudkan fungsi mengonversi halaman web ke PDF.Saya harap tutorial ini dapat membantu Anda menguasai keterampilan konversi HTML ke PDF. Editor Downcodes mengucapkan selamat memprogram kepada Anda!