Demo Langsung: https://phpcoder.tech/download-html-page-as-pdf-using-javascript/#Live_Demo_To_Generate_PDF_From_HTML_Using_JavaScript

Tmenyimpan konten dinamis dari halaman web atau halaman HTML untuk digunakan di masa mendatang dalam format PDF sangat membantu. Ini juga dapat membantu mengunduh data dalam jumlah besar dari aplikasi web dengan mengekspor halaman HTML ke PDF pada acara klik pengguna menggunakan fungsi JavaScript. Untuk Mengunduh Halaman HTML sebagai PDF Menggunakan JavaScript, JavaScript memiliki banyak perpustakaan yang tersedia untuk menghasilkan PDF dari HTML. Namun di sini kami menggunakan jsPDF yang merupakan pustaka JavaScript terbaik untuk mengonversi dan mengunduh halaman HTML menjadi PDF menggunakan JavaScript.

Di sini, dalam tutorial ini, kami akan menunjukkan cara membuat PDF dari halaman HTML menggunakan JavaScript dan jQuery dan juga menyimpan halaman HTML sebagai PDF menggunakan JavaScript dengan demo langsung.

Video demonstrasi kode sumber lengkap untuk mendownload halaman HTML sebagai PDF menggunakan JS ada di sini,

Langkah-langkah Mengunduh Halaman HTML sebagai PDF Menggunakan JavaScript

  • Sertakan perpustakaan jQuery dan jsPDF dengan menggunakan tautan CDN mereka.
  • Buat div konten HTML.
  • Buat instance kelas jsPDF.
  • Buat fungsi klik tombol untuk menghasilkan dan mengunduh PDF dari HTML.
  • Demo Langsung

Sertakan Perpustakaan jQuery dan jsPDF

Di sini kami menyertakan perpustakaan jQuery dan jsPDF untuk menggunakan kelas jsPDF dan jQuery untuk klik tombol dan mendapatkan data dari div.

‹skrip src=”https://code.jquery.com/jquery-3.6.0.min.js›‹/script›

‹skrip src=”https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js›‹/script›

Catatan: Anda tidak perlu mengunduh paket jsPDF lengkap dari situs resminya. Di tautan CDN semua fungsi yang diperlukan tersedia.

Buat Div Konten HTML Dengan CSS

meja {

keluarga font: arial, sans-serif;

keruntuhan perbatasan: keruntuhan;

lebar: 50%;

margin: 0px otomatis;

}

#htmlKonten{

perataan teks: tengah;

}

td, th, tombol {

batas: 1px solid #dddddd;

perataan teks: kiri;

bantalan: 8 piksel;

}

tombol {

batas: 1 piksel hitam pekat;

}

tr:anak ke-n(genap) {

warna latar belakang: #dddddd;

}

‹div id=”htmlKonten”›

‹h2 style=”warna: #0094ff”›Halo‹/h2›

‹h3›Tentang Kode ini:‹/h3›

‹p›Demo cara mengonversi dan mengunduh halaman HTML ke file PDF dengan CSS, menggunakan JavaScript dan jQuery.‹/p›

‹tidak ada›

<tr>

‹th›Orang‹/th›

‹th›Kontak‹/th›

‹th›Negara‹/th›

</tr>

<tr>

‹td›John‹/td›

<td>+2345678910</td>

‹td›Jerman‹/td›

</tr>

<tr>

‹td›Yakub‹/td›

<td>+1234567890</td>

‹td›Meksiko‹/td›

</tr>

<tr>

‹td›Sebelas‹/td›

<td>+91234567802</td>

‹td›Austria‹/td›

</tr>

‹/tbody›

‹/div›

‹div id=”editor”›‹/div›

<p>

‹tombol id=”hasilkanPDF”›hasilkan PDF‹/tombol›

</p>

Di sini kami membuat tabel HTML dengan beberapa desain oleh CSS dan juga membuat tombol di mana pengguna dapat mengklik dan mendownload halaman HTML sebagai PDF.

Baca Juga: Ekspor Data MySQL ke Excel di PHP Menggunakan Ajax

Buat instance Kelas jsPDF

Baris kode jsPDF berikut membuat instance dan menggunakan objek jsPDF dalam JavaScript.

var doc = jsPDF baru();

Kode JavaScript untuk Menghasilkan PDF Dari HTML

‹tipe skrip=”teks/javascript”›

var doc = jsPDF baru();

var specialElementHandlers = {

'#editor': fungsi (elemen, penyaji) {

kembali benar;

}

};

$('#generatePDF').klik(fungsi () {

doc.fromHTML($('#htmlContent').html(), 15, 15, {

'lebar': 700,

'elementHandlers': specialElementHandlers

});

doc.save('sample_file.pdf');

});

Sorotan Kode:

  • Pertama, kami membuat instance Kelas jsPDF.
  • Setelah itu, dengan menggunakan atribut #editor id dari div HTML kita mengambil data halaman HTML.
  • Sekarang kita menggunakan atribut id tombol #generatePDF untuk acara klik.
  • Dengan menggunakan objek doc dengan fungsi fromHTML() kita mengatur lebar, margin kiri(15) dan margin atas( 15) .
  • Akhirnya save() dengan objek doc digunakan untuk mengunduh PDF dari HTML.

Demo Langsung Untuk Menghasilkan PDF Dari HTML Menggunakan JavaScript

Demikian penjelasan lengkap cara download halaman HTML menjadi PDF menggunakan JavaScript dan jQuery dengan menggunakan library jsPDF. Jika Anda mendapat masalah pada saat implementasi, silakan beri komentar di bawah.

Periksa lebih banyak barang dengan jsPDF di sini https://mrrio.github.io/jsPDF/.

Periksa Juga:

Selamat Mengkode..!

Awalnya diterbitkan di:https://phpcoder.tech/download-html-page-as-pdf-using-javascript/