Mencetak Sebagian Dokumen dengan JavaScript. Oke, kali ini saya akan mencoba membuat tips sederhana bagaimana cara untuk mencetak sebagian dokumen dengan javascript. Intinya nanti dalam satu dokumen akan terdapat beberapa Tag DIV dengan ID yang berbeda. Nah ketika Tombol Print di tekan maka secara otomatis akan mencetak sebagian dokumen dengan DIV itu.
Oke langsung saja gak pakek lama. Sederhana banget caranya. Buat sebuag dokument HTML dan tuliskan kode HTML di bawah ini:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html> <head> <title>Mencetak Sebagian Dokumen dengan JavaScript</title> </head> <body> <h1>Tutorialweb</h1> <div id="div1">Tutorial Pemrograman PHP</div> <button onclick="printContent('div1')">Print</button> <div id="div2">Tutorial JavaScript</div> <button onclick="printContent('div2')">Print</button> <p id="p1">Developh Website</p> <button onclick="printContent('p1')">Print</button> </body> </html> |
Simpan dengan nama index.html.
Dari kode HTML di atas sudah terdapat 2 (tiga) Tag DIV dan 1 (satu) Tag P yang mempunyai ID berbeda. Kemudian di bawah masing-masing Tag ada Tag BUTTON yang ketika di Klik maka akan menjalankan Funsi printContent.
Selanjutnya akan dibuat Fungsi untuk printContent, berikut ini kode JavaScript-nya, letakkan kode di bawah ini tepat di bawah Tag TITLE.
|
1 2 3 4 5 6 7 8 9 |
<script> function printContent(el){ var restorepage = document.body.innerHTML; var printcontent = document.getElementById(el).innerHTML; document.body.innerHTML = printcontent; window.print(); document.body.innerHTML = restorepage; } </script> |
Nah… sudah selesai. Silahkan di praktekkan.
Untuk Kode lengkapnya seperti di bawah ini:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!DOCTYPE html> <html> <head> <title>Mencetak Sebagian Dokumen dengan JavaScript</title> <script> function printContent(el){ var restorepage = document.body.innerHTML; var printcontent = document.getElementById(el).innerHTML; document.body.innerHTML = printcontent; window.print(); document.body.innerHTML = restorepage; } </script> </head> <body> <h1>Tutorialweb</h1> <div id="div1">Tutorial Pemrograman PHP</div> <button onclick="printContent('div1')">Print</button> <div id="div2">Tutorial JavaScript</div> <button onclick="printContent('div2')">Print</button> <p id="p1">Developh Website</p> <button onclick="printContent('p1')">Print</button> </body> </html> |
Oke, sekian dulu untuk tips Mencetak Sebagian Dokumen dengan JavaScript.
mantap tutorial nya om :2thumbup
Terus gimana kalau ingin mencetak dari kode PHP dengan type tag class
Print
mohon bantuannya gan
ganti aja div dengan print
tengkiw ya artikel anda sangat membantu daya dalam menambah ilmu pengetahuan.
Saya Rezky Fitriansah, Nim : 1922520028, Mahasiswa ISB Atma Luhur Pangkalpinang,
jangan lupa kunjungi website saya https://www.atmaluhur.ac.id. Terimakasih
Thank you kak artikel nya. Perkenalkan kak nama saya Monalisa Mahasiswa ISB ATMA LUHUR Pangkalpinang dan jangan lupa mampir ke website kampus kita kak (https://www.atmaluhur.ac.id)