Unduh halaman web sebagai pdf menggunakan javascript

Untuk menyimpan konten dinamis dari halaman web atau halaman HTML untuk penggunaan format PDF di masa mendatang sangat membantu. Ini juga dapat membantu mengunduh sejumlah besar data dari aplikasi web dengan mengekspor halaman HTML ke PDF pada peristiwa klik pengguna menggunakan fungsionalitas JavaScript. Untuk Mengunduh Halaman HTML sebagai PDF Menggunakan JavaScript, JavaScript memiliki sejumlah besar pustaka yang tersedia untuk menghasilkan PDF dari HTML. Tapi di sini kami menggunakan jsPDF yang merupakan pustaka JavaScript terbaik untuk mengonversi dan mengunduh halaman HTML sebagai PDF menggunakan JavaScript

Unduh Halaman HTML sebagai 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

Demonstrasi video dari kode sumber lengkap untuk mengunduh halaman HTML sebagai PDF menggunakan JS ada di sini,

Langkah-langkah untuk Mengunduh Halaman HTML sebagai PDF Menggunakan JavaScript
  • Sertakan perpustakaan jQuery dan jsPDF dengan menggunakan tautan CDN mereka
  • Buat div konten HTML
  • Instansiasi 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

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 {

font-family. arial, sans-serif;

perbatasan-runtuh. runtuh;

lebar. 50%;

batas. 0px otomatis;

}

#htmlKonten{

perataan teks. tengah;

}

td, th, tombol {

berbatasan. 1px padat #dddddd;

perataan teks. kiri;

lapisan. 8px;

}

tombol {

berbatasan. 1px hitam pekat;

}

tr. n-anak(genap) {

warna latar belakang. #dddddd;

}

Halo

Tentang Kode ini.

Demo cara mengonversi dan Mengunduh halaman HTML ke file PDF dengan CSS, menggunakan JavaScript dan jQuery.

OrangKontakNegara
Yohanes+2345678910Jerman
Yakub+1234567890Meksiko
Sebelas+91234567802Austria

Di sini kami membuat tabel HTML dengan beberapa desain oleh CSS dan juga membuat tombol tempat pengguna dapat mengklik dan mengunduh halaman HTML sebagai PDF

Baca juga. Ekspor Data MySQL ke Excel di PHP Menggunakan Ajax

Instansiasi Kelas jsPDF

Baris kode jsPDF berikut memberi contoh dan menggunakan objek jsPDF dalam JavaScript

var doc = jsPDF baru();

Kode JavaScript untuk Menghasilkan PDF Dari HTML

var doc = jsPDF baru();

var specialElementHandlers = {

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

kembali benar;

}

};

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

dokter. fromHTML($('#htmlKonten'). html(), 15, 15, {

'lebar'. 700,

'elementHandler'. specialElementHandlers

});

dokter. simpan('sample_file. pdf’);

});

Sorotan Kode
  • Pertama, kita Instansiasi Kelas jsPDF
  • Setelah itu, dengan menggunakan atribut #editor id dari HTML div kita mengambil data halaman HTML
  • Sekarang kami menggunakan atribut id tombol #generatePDF untuk acara klik
  • Dengan menggunakan objek doc dengan fungsi fromHTML() kami 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 mendownload halaman HTML sebagai PDF menggunakan JavaScript dan jQuery dengan menggunakan library jsPDF. Jika Anda mendapat masalah pada saat implementasi, silakan lakukan komentar di bawah ini

Pada artikel ini, kita akan melihat cara mengonversi HTML ke PDF menggunakan JavaScript. Format file PDF sangat berguna untuk mendownload data massal di aplikasi web. Ini membantu pengguna untuk mengunduh konten dinamis dalam format file untuk penggunaan offline dengan fungsi ekspor ke PDF. JavaScript adalah cara termudah untuk mengonversi HTML ke PDF dan ada berbagai pustaka JavaScript yang tersedia untuk menghasilkan PDF dari HTML. jsPDF adalah salah satu pustaka terbaik untuk mengonversi HTML ke PDF menggunakan JavaScript

Jadi, mari lihat menghasilkan PDF menggunakan javascript, mengonversi HTML ke PDF menggunakan jquery, jspdf HTML ke PDF, HTML ke PDF javascript, jquery mengonversi HTML ke PDF, jspdf mengonversi HTML ke PDF

Contoh. Cara Mengonversi HTML Ke PDF Menggunakan JavaScript

Pertama, kita akan membuat Halaman HTML untuk mengonversi HTML menjadi PDF. Tambahkan kode berikut ke halaman HTML Anda

Bagaimana cara mengunduh halaman web sebagai PDF dengan JavaScript?

Buat 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

Bagaimana cara mengunduh seluruh halaman web sebagai PDF?

Ikuti langkah-langkah ini untuk menyimpan halaman web Chrome ke PDF. .
Pilih halaman web. Kunjungi halaman web yang ingin Anda konversi. .
Pilih Cetak dari menu drop-down berikutnya
Ubah lokasi tujuan dari printer Anda menjadi Simpan sebagai PDF dan Anda kemudian dapat memilih tempat untuk menyimpan halaman web berformat PDF yang baru

Bagaimana cara membuat PDF dalam JavaScript?

Untuk dapat mengonversi halaman web Anda ke pdf, kami perlu. .
impor perpustakaan JavaScript baik dengan menginstalnya secara lokal di server Anda menggunakan NPM atau dengan memasukkannya ke dalam kode HTML Anda seperti contoh berikut
Tambahkan fungsi generatePDF yang akan mengonversi bagian yang diteruskan dari halaman web Anda menjadi pdf dengan memanggil dokumen

Bagaimana cara mengunduh konten div sebagai PDF menggunakan JavaScript?

var doc = jsPDF baru();
fungsi saveDiv(divId, judul) {
doc. fromHTML(`${title}` + document. getElementById(divId). innerHTML + ``);.
dokter. simpan('div. pdf');
fungsi printDiv(divId,
judul) {