Cara Bikin Tombol Download Artikel Dari Tag DIV ke PDF Pakai jQuery

Membuat halaman download konten agar dapat di unduh menjadi ekstensi file .pdf - Anda memerlukan 2 buah sumber skrip untuk menjalankan tutorial ini. Sumber pertama adalah framework googleapis, kemudian jsPDF.

Berikut langkah-langkah mudah dan praktis untuk membuat tombol download dari teks yang berada pada tag tertentu, misalnya tag div, tag p, tag span, tag blockquote, dan tag-tag lainnya dari blog atau situs Anda.

Untuk tag div id="post-content" disini digunakan sebagai tempat / ruang penyimpanan awal yang akan di pindahkan ke div tag "editor" agar bisa di download.
<div id="post-content">
<h1>Hello, saya heading 1</h1>
<h2>Hello, saya heading 2</h2>
<h3>Hello, saya heading 3</h3>

<p>Kalau saya sebuah pararaph</p>
</div>

Secara diam-diam, tag="editor" menggandakan konten dari tag "post-content" setelah tombol pemicu ditekan. Ini hanya menyimpan sesaat secara (magic) yang tidak akan terlihat oleh mata manusia.
<div id="editor"></div>

...daaaaan tombol berikut adalah pemicunya. Hati-hati menekan tombol ini, karena bisa 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/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://www.w3chords.com/asset/jspdf.min.js"></script>

Nah, kode dibawah ini bisa 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 contoh klik disini?

Popular posts from this blog

Cara Mudah Ambil Uang di ATM BRI (+gambar)

Ramalan Jodoh dan Pasangan Hidup Menurut Tanggal Lahir

Cara Mengetahui Hari Kelahiran Weton Jawa - Online