Javascript konversi situs web ke pdf

Question

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

Table of Contents Show

Konversikan HTML ke PDF menggunakan jsPDF
HTML ke PDF tanpa menggunakan pustaka Javascript apa pun
Bagaimana cara mengonversi halaman web ke PDF?
Bagaimana cara membuat PDF dalam JavaScript?
Bagaimana cara mengonversi halaman web ke PDF dalam HTML?
Bagaimana cara mengunduh PDF dari URL 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="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://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 'https://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
  
    




Dowload 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

Bagaimana cara mengonversi halaman web ke PDF?

Mengonversi halaman web terbuka dari browser Anda ke PDF. .

Buka halaman web HTML di Internet Explorer, Google Chrome, atau Firefox jika Anda menggunakan Windows. Di Mac, buka halaman web di Firefox

Pilih alat Konversi ke PDF

Beri nama file PDF baru Anda

Pilih Simpan dan pilih lokasi untuk file Anda

Bagaimana cara membuat PDF dalam JavaScript?

Cara membuat PDF menggunakan Javascript .

var doc = jsPDF baru();

dokter. teks(10, 10, 'Halo dunia. ');

dokter. simpan('halo-dunia. pdf');

Bagaimana cara mengonversi halaman web ke PDF dalam HTML?

Cara mengonversi halaman HTML menjadi file PDF. .

Di komputer Windows, buka halaman web HTML di Internet Explorer, Google Chrome, atau Firefox. .

Klik tombol "Konversi ke PDF" di bilah alat Adobe PDF untuk memulai konversi PDF

Masukkan nama file dan simpan file PDF baru Anda di lokasi yang diinginkan

Bagaimana cara mengunduh PDF dari URL menggunakan JavaScript?

dispatchEvent(New MouseEvent('klik')); . pdf"; download(fileURL,fileName); Kode di atas hanya untuk menguji unduh satu file dari URL hardcoded. Jika berfungsi sebagaimana mestinya, ketika halaman dimuat, itu harus mengunduh pdf dari url yang disediakan.

kode javascript