Pada artikel ini saya akan menjelaskan dengan sebuah contoh, bagaimana cara menyimpan BLOB (Binary Data) sebagai file PDF menggunakan JavaScript
File PDF akan diunduh sebagai BLOB (Binary Data) menggunakan panggilan XmlHttpRequest AJAX dan kemudian akan dikirim untuk diunduh di Browser menggunakan JavaScript
Lokasi File
File PDF disimpan dalam folder bernama File di dalam direktori proyek
Catatan . Anda juga dapat mengatur URL PDF yang dapat dimiliki oleh server yang sama atau lokasi server lainnya.
Menyimpan BLOB sebagai File PDF menggunakan JavaScript
Saat Tombol Download diklik, fungsi DownloadFile JavaScript dipanggil
Di dalam fungsi DownloadFile JavaScript, URL File diteruskan sebagai parameter ke panggilan GET dari panggilan JavaScript XmlHttpRequest
Kemudian di dalam onload event handler, Byte Array (Binary Data) yang diterima diubah menjadi objek BLOB dan File diunduh di Browser
Format file PDF sangat berguna untuk mengunduh data massal di aplikasi web. Ini membantu pengguna mengunduh konten dinamis dalam format file untuk penggunaan offline. Dengan fungsi ekspor ke PDF, konten HTML diubah menjadi dokumen PDF dan diunduh sebagai file PDF. Dalam aplikasi web dinamis, skrip sisi server digunakan untuk mengonversi HTML ke PDF dan menghasilkan file PDF menggunakan PHP
Jika Anda menginginkan solusi sisi klien untuk menghasilkan dokumen PDF, JavaScript adalah cara termudah untuk mengonversi HTML ke PDF. Ada berbagai pustaka JavaScript yang tersedia untuk menghasilkan PDF dari HTML. JsPDF adalah salah satu perpustakaan terbaik untuk mengonversi HTML ke PDF menggunakan JavaScript. Dalam tutorial ini, kami akan menunjukkan cara membuat dokumen PDF dan mengonversi HTML ke PDF menggunakan pustaka JavaScript dan jsPDF
Dalam skrip contoh ini, kami akan membagikan cuplikan kode untuk menangani pembuatan PDF dan operasi terkait konversi HTML ke PDF menggunakan JavaScript
Sertakan Perpustakaan jsPDF
Pustaka jQuery tidak diperlukan, cukup sertakan file pustaka jsPDF untuk menggunakan kelas jsPDF
Perhatikan bahwa. Anda tidak perlu mengunduh perpustakaan jsPDF secara terpisah, semua file yang diperlukan sudah termasuk dalam paket kode sumber kami
Muat dan Mulai Kelas jsPDF
Gunakan baris kode berikut untuk memulai kelas jsPDF dan gunakan objek jsPDF di JavaScript
window.jsPDF = window.jspdf.jsPDF; var doc = new jsPDF();Hasilkan PDF menggunakan JavaScript
Contoh berikut menunjukkan cara menggunakan library jsPDF untuk menghasilkan file PDF menggunakan JavaScript
- Tentukan konten dalam metode text() dari objek jsPDF
- Gunakan metode addPage() untuk menambahkan halaman baru ke PDF
- Gunakan metode save() untuk membuat dan mengunduh file PDF
Gunakan metode addImage() untuk menambahkan gambar ke PDF menggunakan objek jsPDF
- Jalur/URL gambar sumber harus ditentukan dalam parameter pertama dalam metode addImage()
Konversikan Konten HTML ke PDF menggunakan JavaScript
Contoh berikut menunjukkan cara menggunakan library jsPDF untuk mengonversi HTML ke PDF dan menghasilkan file PDF dari konten HTML menggunakan JavaScript
- Ambil konten HTML dari elemen tertentu dengan ID atau kelas
- Konversikan konten HTML dari bagian tertentu halaman web dan hasilkan PDF
- Simpan dan unduh konten HTML sebagai file PDF
Kode HTML
Kode JavaScript
Konfigurasi yang Berguna
Pustaka jsPDF menyediakan berbagai metode dan opsi untuk mengonfigurasi pembuatan PDF. Beberapa metode kelas jsPDF yang berguna diberikan di bawah ini yang biasanya digunakan untuk mengekspor HTML ke PDF menggunakan jQuery
Ubah Orientasi Kertas
Gunakan opsi orientation_ untuk mengatur orientasi kertas PDF
Ubah Font Teks
Gunakan metode setFont()_ untuk mengatur tampilan font teks, perataan teks, dan rotasi dalam PDF
Konversikan Konten HTML ke PDF dengan Gambar dan Banyak Halaman
Dalam cuplikan kode contoh ini, kami akan menunjukkan cara menggunakan pustaka jsPDF untuk mengonversi HTML ke PDF dan menghasilkan file PDF dari konten HTML termasuk gambar menggunakan JavaScript
- Jalur file absolut atau relatif dapat digunakan di src gambar
- Pustaka html2canvas diperlukan untuk mengonversi konten HTML (dengan gambar) ke dokumen PDF
- Opsi autoPaging membantu memecah dokumen PDF dalam beberapa halaman secara otomatis
JavaScript
HTML
Buat PDF dengan Tanda Air di PHP menggunakan Dompdf
Kesimpulan
Kode contoh kami membantu Anda mengonversi HTML ke PDF dan menghasilkan file PDF menggunakan JavaScript. Anda dapat dengan mudah menambahkan fungsi Ekspor ke PDF di halaman web tanpa bergantung pada skrip sisi server. Fungsionalitas pembuatan PDF dapat ditingkatkan dengan opsi konfigurasi jsPDF sesuai kebutuhan Anda. Unduh paket kode sumber kami untuk mendapatkan semua file yang diperlukan termasuk pustaka JavaScript jsPDF
Apakah Anda ingin mendapatkan bantuan implementasi, atau memodifikasi atau meningkatkan fungsionalitas skrip ini?