Cara Bikin Tombol Download Artikel Dari Tag Div Ke Pdf Pakai Jquery

Membuat halaman d0wnl0ad konten biar sanggup di unduh menjadi ekstensi file .pdf - Anda memerlukan 2 buah sumber skrip untuk menjalankan tutorial ini. Sumber pertama yakni framework googleapis, lalu jsPDF.

Berikut langkah-langkah gampang dan mudah untuk menciptakan tombol d0wnl0ad dari teks yang berada pada tag tertentu, contohnya tag div, tag p, tag span, tag blockquote, dan tag-tag lainnya dari blog atau situs Anda.

Untuk tag div id="post-content" disini dipakai sebagai daerah / ruang penyimpanan awal yang akan di pindahkan ke div tag "editor" biar sanggup di d0wnl0ad.

<div id="post-content"> <h1>Hello, aku heading 1</h1> <h2>Hello, aku heading 2</h2> <h3>Hello, aku heading 3</h3>  <p>Kalau aku sebuah pararaph</p> </div> 

Secara diam-diam, tag="editor" menjiplak konten dari tag "post-content" sehabis tombol pemicu ditekan. Ini hanya menyimpan sesaat secara (magic) yang tidak akan terlihat oleh mata manusia.

<div id="editor"></div>

...daaaaan tombol berikut yakni pemicunya. Hati-hati menekan tombol ini, alasannya sanggup menyedot kuota Anda @#$%^&*

<button id="goPDF">Jadikan sebagai PDF</button>

Selanjutnya, simpan dua buah script ini kedalam kepala / head HTML blog Anda.
<script type="text/j4vascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/j4vascript" src="https://www.w3chords.com/asset/jspdf.min.js"></script>

Nah, instruksi dibawah ini sanggup disimpan dimanapun, asalkan masih berada pada area blog Anda sendiri, bukan blog milik orang lain wakakaka

<script> var dokumen = new jsPDF(); var specialElementHandlers = {     '#editor': function (element, renderer) {         return true;     } };  $('#goPDF').click(function () {     dokumen.fromHTML($('#post-content').html(), 15, 15, {         'width': 170,             'elementHandlers': specialElementHandlers     });     dokumen.save('example-file-pdf-by-kangsigit.pdf'); }); </script> 

Simpan dan lihat hasilnya.
Perlu pola klik disini?
Sumber http://www.kangsigit.com/

Share this post