0

I distributed the data across multiple tables (code posted here) using data table plugin, which works wonderfully. Now, I would like to print the data on one page. Is there a way to print or export the data to one PDF but maintain the multiple data tables on screen?

Below code added a button on each table - and only exported the data for that table:

dataTableExample = $('#' + table).DataTable({
        "dom": 'Bfrtip',
        "buttons": ['pdfHtml5'],

The separate HTML file has all the required javascript libraries for the PDF button.

1

JSPDF library would help you for this, you could combine the tables' content and then generate the pdf file.

Some samples.

http://blog.appliedinformaticsinc.com/use-jspdf-for-exporting-data-html-as-pdf-in-5-easy-steps/

https://scotch.io/@nagasaiaytha/generate-pdf-from-html-using-jquery-and-jspdf

  • Thanks. I'm following the instruction from the 2nd link. Was it supposed to generate the PDF similar to a screenshot? I'm not sure what I'm expecting but it only generated portion of the page and it did not keep the table formatting (output is plain text) -- I probably need to tweak the code, will do more research but at least its a start. – Tamras Merin Jan 24 '18 at 21:40
0

Instead of adding export to pdf button in each dataTable, you should add only one button and write code to combine and export table content to a single pdf file. I was able to achieve this by making use of exportData() method of DataTables library and pdfMake library.

Add a button to your page as given below:

<button id="ExportPdf" type="button">Export All</button>

write below function to trigger on its click:

$(document).ready(function(){
    $('#ExportPdf').click(function(){

            var config =    {
                                className:"buttons-pdf buttons-html5",
                                customize:null,
                                download:"download",
                                exportOptions:{},
                                extension:".pdf",
                                filename:"*",
                                footer:false,
                                header:true,
                                messageBottom:"*",
                                messagetop:"*",
                                namespace:".dt-button-2",
                                orientation:"portrait",
                                pageSize:"A4",
                                title:"*"
                                };

            var tables = ["table1","table2","table3"];
            var tablesConverted = {};
            for(var k=0;k<tables.length;k++)
            {
                var dt = $('#'+tables[k]).DataTable();
                var data = dt.buttons.exportData( config.exportOptions );
                var info = dt.buttons.exportInfo( config );

                var rows = [];

                    if ( config.header ) {
                        rows.push( $.map( data.header, function ( d ) {
                            return {
                                text: typeof d === 'string' ? d : d+'',
                                style: 'tableHeader'
                            };
                        } ) );
                    }

                    for ( var i=0, ien=data.body.length ; i<ien ; i++ ) {
                        rows.push( $.map( data.body[i], function ( d ) {
                            return {
                                text: typeof d === 'string' ? d : d+'',
                                style: i % 2 ? 'tableBodyEven' : 'tableBodyOdd'
                            };
                        } ) );
                    }

                    if ( config.footer && data.footer) {
                        rows.push( $.map( data.footer, function ( d ) {
                            return {
                                text: typeof d === 'string' ? d : d+'',
                                style: 'tableFooter'
                            };
                        } ) );
                    }

                    tablesConverted[tables[k]]=rows;
            }


                var doc = {
                    pageSize: config.pageSize,
                    pageOrientation: config.orientation,
                    content: [
                        "Data for "+tables[0],
                        {
                            table: {
                                headerRows: 1,
                                body: tablesConverted[tables[0]]
                            },
                            layout: 'noBorders'
                        },
                        " ",
                        "Data for "+tables[1],
                        " ",
                        {
                            table: {
                                headerRows: 1,
                                body: tablesConverted[tables[1]]
                            },
                            layout: 'noBorders'
                        },
                        " ",
                        "Data for "+tables[2],
                        " ",
                        {
                            table: {
                                headerRows: 1,
                                body: tablesConverted[tables[2]]
                            },
                            layout: 'noBorders'
                        },
                    ],
                    styles: {
                        tableHeader: {
                            bold: true,
                            fontSize: 11,
                            color: 'white',
                            fillColor: '#2d4154',
                            alignment: 'center'
                        },
                        tableBodyEven: {},
                        tableBodyOdd: {
                            fillColor: '#f3f3f3'
                        },
                        tableFooter: {
                            bold: true,
                            fontSize: 11,
                            color: 'white',
                            fillColor: '#2d4154'
                        },
                        title: {
                            alignment: 'center',
                            fontSize: 15
                        },
                        message: {}
                    },
                    defaultStyle: {
                        fontSize: 10
                    }
                };

                if ( info.messageTop ) {
                    doc.content.unshift( {
                        text: info.messageTop,
                        style: 'message',
                        margin: [ 0, 0, 0, 12 ]
                    } );
                }

                if ( info.messageBottom ) {
                    doc.content.push( {
                        text: info.messageBottom,
                        style: 'message',
                        margin: [ 0, 0, 0, 12 ]
                    } );
                }

                if ( info.title ) {
                    doc.content.unshift( {
                        text: info.title,
                        style: 'title',
                        margin: [ 0, 0, 0, 12 ]
                    } );
                }

                if ( config.customize ) {
                    config.customize( doc, config );
                }


        pdfMake.createPdf(doc).download('optionalName.pdf');
    });
});

Please note that you will need to refer pdfmake js and its supporting font js:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>

Please let me know if it works for you.

  • I added the button and it showed up on screen. I created a new JS file and pasted your code. Then in my HTML file, I added the references to pdfmake and supporting fonts. I also added <script type="text/javascript" src="/SiteAssets/js/ExportToPDF.js"></script> which is to reference the new js file. Nothing happened when I clicked the button. – Tamras Merin Jan 24 '18 at 20:17
  • That is probably because you have not enclosed the export button click event in document.ready() method. Please try enclosing the click event in document.ready() method as per given in the answer. I have updated the answer as well. – Sagar Jan 25 '18 at 6:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.