Pada artikel ini, kita akan melihat cara mengonversi HTML ke PDF menggunakan JavaScript. Format file PDF sangat berguna untuk mengunduh 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 kita 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 ke PDF. Tambahkan kode berikut ke halaman HTML Anda
<html> <h1>How To Convert HTML To PDF Using JavaScript - Techsolutionstuff</h1> <form class="form"> <table> <tbody> <tr> <th>Company Name</th> <th>Employee Name</th> <th>Country</th> </tr> <tr> <td>Dell</td> <td>Maria</td> <td>Germany</td> </tr> <tr> <td>Asus</td> <td>Francisco</td> <td>Mexico</td> </tr> <tr> <td>Apple</td> <td>Roland</td> <td>Austria</td> </tr> <tr> <td>HP</td> <td>Helen</td> <td>UK</td> </tr> <tr> <td>Lenovo</td> <td>Yoshi</td> <td>Canada</td> </tr> </tbody> </table><br> <input type="button" id="create_pdf" value="Generate PDF"> </form> </html>
Masuk ke mode layar penuh Keluar dari mode layar penuh
Baca Juga. Cara Menonaktifkan Klik Kanan Menggunakan jQuery
Tambahkan gaya halaman HTML ini
<style> table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; } td { border: 1px solid #dddddd; text-align: left; padding: 8px; } th{ border: 1px solid #dddddd; text-align: left; padding: 8px; background-color: #111; color:white; } tr:nth-child(odd) { background-color: #dddddd; } </style> _
Masuk ke mode layar penuh Keluar dari mode layar penuh
Baca Juga. jQuery Image Magnifier pada Mouse Hover
Tambahkan skrip berikut ke halaman HTML untuk mengubahnya menjadi pdf
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script> <script> $(document).ready(function () { var form = $('.form'), cache_width = form.width(), a4 = [595.28, 841.89]; // for a4 size paper width and height $('#create_pdf').on('click', function () { $('body').scrollTop(0); createPDF(); }); function createPDF() { getCanvas().then(function (canvas) { var img = canvas.toDataURL("image/png"), doc = new jsPDF({ unit: 'px', format: 'a4' }); doc.addImage(img, 'JPEG', 20, 20); doc.save('Bhavdip-html-to-pdf.pdf'); form.width(cache_width); }); } function getCanvas() { form.width((a4[0] * 1.33333) - 80).css('max-width', 'none'); return html2canvas(form, { imageTimeout: 2000, removeContainer: true }); } }); </script>
Masuk ke mode layar penuh Keluar dari mode layar penuh
Anda mungkin juga suka
Baca Juga. Laravel 8 Hasilkan PDF Menggunakan DomPDF
Baca Juga. Cara Menghasilkan PDF Dari Tampilan HTML Di Laravel
Baca Juga. Cara Mendapatkan Nilai Daftar Kotak Centang Terpilih Di Jquery
Pada artikel sebelumnya, kami telah menjelaskan tentang cara mengubah html ke word menggunakan javascript atau cara membaca pdf menggunakan Javascript atau membaca excel menggunakan Javascript, namun pada artikel ini kita akan membaca tentang cara mengubah html menjadi pdf menggunakan Javascript atau JS dengan mudah dengan
Konversikan HTML ke PDF menggunakan jsPDF
Mari kita lihat contoh, untuk html ke pdf menggunakan library jsPDF terlebih dahulu, karena jauh lebih mudah, jadi dalam contoh ini, kita akan menggunakan jsPDF, Anda dapat mengunduhnya dari https. //github. com/MrRio/jsPDF atau bisa juga menggunakan link cdn '//cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.debug.js'
Setelah kita mengunduh jsPDF, buat saja objeknya "var doc = new jsPDF()" dan kemudian langsung ekspor HTML ke PDF seperti yang ditunjukkan di bawah ini
function generatePDF() { var doc = new jsPDF(); //create jsPDF object doc.fromHTML(document.getElementById("test"), // page element which you want to print as PDF 15, 15, { 'width': 170 //set width }, function(a) { doc.save("HTML2PDF.pdf"); // save file name as HTML2PDF.pdf }); }Mari pertimbangkan untuk memeriksa contoh lengkapnya, ini HTML-nya
This is p one
More Text to be printed on PDF
Jika Anda ingin memasukkan gambar dalam konversi HTML ke PDF menggunakan Javascript di jsPDF, Anda dapat memasukkan kode base64 dari gambar tersebut, jadi inilah contoh biola lengkap, yang menyertakan gambar juga dalam konversi
Keluaran
Lebih banyak konfigurasi menggunakan jsPDF
Jika Anda ingin menghapus sebagian PDF dari halaman lengkap, Anda dapat menyebutkannya di fungsi specialElementHandler, berikut adalah penjelasan lebih lanjut tentang konfigurasi menggunakan jsPDF dalam komentar beserta contoh
var pdf = new jsPDF('p', 'pt', 'letter'); //letter = letter size pdf // source can be HTML-formatted string, or a reference // to an actual DOM element from which the text will be scraped. source = $('#content')[0]; // we support special element handlers. Register them with jQuery-style // ID selector for either ID or node name. ("#iAmID", "div", "span" etc.) // There is no support for any other type of selectors // (class, of compound) at this time. specialElementHandlers = { // element with id of "bypass" - jQuery style selector '#bypassme': function (element, renderer) { // true = "handled elsewhere, bypass text extraction" return true } }; margins = { top: 80, bottom: 60, left: 40, width: 522 }; // all coords and widths are in jsPDF instance's declared units // 'inches' in this case pdf.fromHTML( source, // HTML string or DOM elem ref. margins.left, // x coord margins.top, // y coord { 'width': margins.width, // max width of content on PDF 'elementHandlers': specialElementHandlers }, function (dispose) { // dispose: object with X, Y of the last line add to the PDF // this allow the insertion of new lines after html pdf.save('Filename.pdf'); }, margins );Konversi gambar ke base64 menggunakan html2canvas
Jika Anda tidak memiliki kode gambar base64, Anda dapat mengonversi html ke pdf dengan gambar menggunakan HTML2Canvas dengan jsPDF
HTML2Canvas akan mengubah gambar Anda menjadi kode base64 dan kemudian akan membantu Anda mencetak pdf dengan lebih mudah
Ini adalah demo biola untuk itu
Plugin lain yang dapat berguna untuk konversi html ke pdf adalah
HTML ke PDF tanpa menggunakan pustaka Javascript apa pun
Pada contoh di atas, kami menggunakan pustaka jsPDF, tetapi sekarang kami akan mengubahnya menggunakan kode Javascript sederhana, meskipun kode ini tidak secara langsung mengubah HTML menjadi PDF, tetapi akan membuka dialog untuk mencetak atau menyimpan HTML sebagai PDF, berikut adalah