Unduh div di halaman HTML sebagai pdf menggunakan javascript

Saya memiliki div konten dengan id sebagai "konten". Di div konten saya memiliki beberapa grafik dan beberapa tabel. Saya ingin mengunduh div itu sebagai pdf ketika pengguna mengklik tombol unduh. Apakah ada cara untuk melakukannya menggunakan javascript atau jQuery?

Anda dapat melakukannya dengan menggunakan jsPDF

HTML:

<div id="content">
     <h3>Hello, this is a H3 tag</h3>

    <p>A paragraph</p>
</div>
<div id="editor"></div>
<button id="cmd">generate PDF</button>

JavaScript:

var doc = new jsPDF();
var specialElementHandlers = {
    '#editor': function (element, renderer) {
        return true;
    }
};

$('#cmd').click(function () {
    doc.fromHTML($('#content').html(), 15, 15, {
        'width': 170,
            'elementHandlers': specialElementHandlers
    });
    doc.save('sample-file.pdf');
});

Konten di dalam a <div class='html-content'>....</div>dapat diunduh sebagai pdf dengan gaya menggunakan jspdf & html2canvas .

Anda perlu merujuk kedua pustaka js,

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
<script type="text/javascript" src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>

Kemudian panggil fungsi di bawah ini,

//Create PDf from HTML...
function CreatePDFfromHTML() {
    var HTML_Width = $(".html-content").width();
    var HTML_Height = $(".html-content").height();
    var top_left_margin = 15;
    var PDF_Width = HTML_Width + (top_left_margin * 2);
    var PDF_Height = (PDF_Width * 1.5) + (top_left_margin * 2);
    var canvas_image_width = HTML_Width;
    var canvas_image_height = HTML_Height;

    var totalPDFPages = Math.ceil(HTML_Height / PDF_Height) - 1;

    html2canvas($(".html-content")[0]).then(function (canvas) {
        var imgData = canvas.toDataURL("image/jpeg", 1.0);
        var pdf = new jsPDF('p', 'pt', [PDF_Width, PDF_Height]);
        pdf.addImage(imgData, 'JPG', top_left_margin, top_left_margin, canvas_image_width, canvas_image_height);
        for (var i = 1; i <= totalPDFPages; i++) { 
            pdf.addPage(PDF_Width, PDF_Height);
            pdf.addImage(imgData, 'JPG', top_left_margin, -(PDF_Height*i)+(top_left_margin*4),canvas_image_width,canvas_image_height);
        }
        pdf.save("Your_PDF_Name.pdf");
        $(".html-content").hide();
    });
}

Referensi: pdf genration dari html canvas dan jspdf .

Mungkin ini akan membantu seseorang.

Solusi Anda memerlukan beberapa metode ajax untuk meneruskan html ke server back-end yang memiliki fasilitas html ke pdf dan kemudian mengembalikan keluaran pdf yang dihasilkan kembali ke browser.

Pertama mengatur kode sisi klien, kita akan mengatur kode jquery sebagai

   var options = {
            "url": "/pdf/generate",
            "data": "data=" + $("#content").html(),
            "type": "post",
        }
   $.ajax(options)

Kemudian intersep data dari skrip pembuatan html2pdf sebagai berikut

   $html = $_POST['data'];
   $pdf = html2pdf($html);

   header("Content-Type: application/pdf"); //check this is the proper header for pdf
   header("Content-Disposition: attachment; filename='some.pdf';");
   echo $pdf;

AFAIK tidak ada fungsi jquery asli yang melakukan ini. Pilihan terbaik adalah memproses konversi di server. Bagaimana Anda melakukannya tergantung pada bahasa apa yang Anda gunakan (.net, php dll.). Anda bisa meneruskan konten div ke fungsi yang menangani konversi, yang akan mengembalikan pdf ke pengguna.

Ya, itu mungkin untuk menangkap div sebagai PDF di JS. Anda dapat memeriksa solusi yang disediakan oleh https://grabz.it . Mereka memiliki API JavaScript yang bagus dan bersih yang akan memungkinkan Anda untuk menangkap konten dari satu elemen HTML seperti div atau span.

Jadi, Anda menggunakannya, Anda akan membutuhkan aplikasi + kunci dan SDK gratis . Penggunaannya adalah sebagai berikut:

Misalkan Anda memiliki HTML:

<div id="features">
    <h4>Acme Camera</h4>
    <label>Price</label>$399<br />
    <label>Rating</label>4.5 out of 5
</div>
<p>Cras ut velit sed purus porttitor aliquam. Nulla tristique magna ac libero tempor, ac vestibulum felisvulput ate. Nam ut velit eget
risus porttitor tristique at ac diam. Sed nisi risus, rutrum a metus suscipit, euismod tristique nulla. Etiam venenatis rutrum risus at
blandit. In hac habitasse platea dictumst. Suspendisse potenti. Phasellus eget vehicula felis.</p>

Untuk menangkap apa yang ada di bawah id fitur, Anda perlu:

//add the sdk
<script type="text/javascript" src="grabzit.min.js"></script>
<script type="text/javascript">
//login with your key and secret. 
GrabzIt("KEY", "SECRET").ConvertURL("http://www.example.com/my-page.html",
{"target": "#features", "format": "pdf"}).Create();
</script>

Anda perlu mengganti http://www.example.com/my-page.htmldengan url target Anda dan #featuresesuai dengan pemilih CSS Anda.

Itu saja. Sekarang, ketika halaman dimuat, screenshot gambar sekarang akan dibuat di lokasi yang sama dengan tag skrip, yang akan berisi semua konten div fitur dan tidak ada yang lain.

Konfigurasi dan penyesuaian lain yang dapat Anda lakukan pada mekanisme div-screenshot, silakan periksa di sini