datatables export / print - pdf excel print copy csv

sumber : https://datatables[.]net/extensions/buttons/examples/initialisation/export.html

udah lama ga pakai grid datatables :D terlalu lama berkutat dengan scrapping. ada yang berubah di export datatables yang baru. kalau dulu memakai file swf yang akan kita panggil saat akan menggunakan button export. untuk yang sekarang tidak perlu lagi menggunakan swf.

contoh:

$(document).ready(function() {

    $('#example').DataTable( {

        dom: 'Bfrtip',

        buttons: [

            'copy', 'csv', 'excel', 'pdf', 'print'

        ]

    } );

} );

berikut file js yang harus di load:

https://code.jquery.com/jquery-1.12.3.js

https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js

https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js

https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js

https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js

https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js

https://cdn.datatables.net/buttons/1.2.2/js/buttons.html5.min.js

css

https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css

https://cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.min.css

berikut beberapa hasil goggling dari kesulitan saat menggunakan export datatables. kode dibawah sudah dicoba dan berhasil :)

mengubah nama file excelhtml5

$(document).ready(function() {

    $('#example').DataTable( {

        dom: 'Bfrtip',

        buttons: [

            {

                extend: 'excelHtml5',

                filename: 'Data export'

            },

            {

                extend: 'pdfHtml5',

                title: 'Data export'

            }

        ]

    } );

} );

sembunyikan kolom yang visible false / hide column

$(document).ready(function() {

    $('#example').DataTable( {

        dom: 'Bfrtip',

        buttons: [

            {

                extend: 'excelHtml5',

                exportOptions: {

                    columns: ':visible'

                }

            }

        ],

        columnDefs: [ {

            targets: -1,

            visible: false

        } ]

    } );

} );

menambahkan row / baris baru untuk judul di excelhtml5

var sheet = xlsx.xl.worksheets['sheet1.xml'];
                var numrows = 3;
                var clR = $('row', sheet);

                //update Row
                clR.each(function () {
                    var attr = $(this).attr('r');
                    var ind = parseInt(attr);
                    ind = ind + numrows;
                    $(this).attr("r",ind);
                });

                // Create row before data
                $('row c ', sheet).each(function () {
                    var attr = $(this).attr('r');
                    var pre = attr.substring(0, 1);
                    var ind = parseInt(attr.substring(1, attr.length));
                    ind = ind + numrows;
                    $(this).attr("r", pre + ind);
                });

                function Addrow(index,data) {
                    msg='<row r="'+index+'">'
                    for(i=0;i<data.length;i++){
                        var key=data[i].key;
                        var value=data[i].value;
                        msg += '<c t="inlineStr" r="' + key + index + '">';
                        msg += '<is>';
                        msg +=  '<t>'+value+'</t>';
                        msg+=  '</is>';
                        msg+='</c>';
                    }
                    msg += '</row>';
                    return msg;
                }


                //insert
                var r1 = Addrow(1, [{ key: 'A', value: '' }, { key: 'B', value: '' }]);
                var r2 = Addrow(2, [{ key: 'A', value: '' }, { key: 'B', value: '' }]);
                var r3 = Addrow(3, [{ key: 'A', value: '' }, { key: 'B', value: '' }]);

                sheet.childNodes[0].childNodes[1].innerHTML = r1 + r2+ r3+ sheet.childNodes[0].childNodes[1].innerHTML;