Cara menggunakan print table php pdf

Cara menggunakan print table php pdf

Haloo sobat, tutorial yang akan saya bagikan saat ini merupakan tutorial paling singkat hehe tapi sejauh ini lumayan membantu pekerjaan saya dikantor. Yaitu cara Export ke PDF / Excel / CSV ataupun langsung print juga bisa dari Datatables.

Terserah kalian pakai PHP murni, FW Laravel dan FW Lainnya bisa kok yang penting kalian menggunakan Datatables.

Kalau ada yang tanya misal mau export ke excel dan pdf tapi tidak menggunakan Datatables? Berarti kalian harus masuk ke tutor ini :Laravel Datatables Part I

Oke sekarang yang perlu disiapkan yaitu :

  • Tabel yang akan dijadikan praktek sudah siap
  • Setting datatables nya dengan memanggil CSS & JS (online, kalau mau offline tinggal download JS dan CSSnya)

Perlu diingat :

  • Tutor kali ini fokus untuk Export & Langsung print saja
  • Kalau belum paham bisa lihat diyoutube gilacoding : Youtube Gilacoding

Ini saya sudah siap tabel (saya pake Laravel tapi datanya masih statis belum pake MySQL)

Yang mau latihan, download project nya nanti diakhir.

Setelah data siap, Panggil beberapa JS dan CSS dari kalian download tadi.

Ini Javascriptnya :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.print.min.js"></script>

Ini CSSnya :

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.5.6/css/buttons.dataTables.min.css">

Langsung buat JS nya seperti ini (langsung copas juga bisa, tapi pelajari ya)

<script type="text/javascript"> 
    $(document).ready(function () {
        $('#table-datatables').DataTable({
            dom: 'Bfrtip',
            buttons: ['copy', 'csv', 'excel', 'pdf', 'print']
        });
    });
</script>

Pastikan ID pada table-datatables sama dengan ID pada tabel kalian.

Refresh browser kalian, langsung bisa kan hehe singkat banget ya!

Masih pada Error?

  • Pada browser coba buka console nya dengan cara (Chrome : CTRL + SHIFT + I) lihat errornya apa
  • Pastikan urutan JS atau CSS sesuai dengan saya diatas
  • Mau custom, mau gini, mau fitur lain gimana? Yaa bisa diubek disini nih : https://datatables.net/
  • Belum paham juga, bisa lihat video saya sob :

Note : Kalau kalian mau export dengan custom yang lumayan kompleks, cara ini tidak disarankan ya. Mending pakai cara yang saya share sebelumnya disini : Export dengan Laravel

Oke sekian tutorial singkatnya, silahkan email / komen disini / komen diyoutube buat yang mau request, menambahkan, koreksi dan tanya.

Maaf jika terdapat kesalahan kata dan penulisan ya, tunggu tutorial selanjutnya!

Download Projectnya disini : Project disini

Kunjungi juga : @banua.informatika

Cara menggunakan print table php pdf