Can I export two dataTables into a single pdf with pdfmake

Question

HTML I want to export the below two dataTables into a single pdf with single export button. Both the dataTables have different columns so it cannot be merged. CSS Java Script I want make changes in this dataTable jQuery functions in such a way that if I click on single button both the dataTables data should be exported in same

Accepted Answer

Here is an approach which creates one PDF containing the data from both DataTables in the web page:The first data table is created with no button:$('#example1').DataTable();The second table uses the customize: function ( doc ) { ... } syntax – the same as I linked to in my comments.Within that function, we access the data for the first table:var table1 = $('#example1').DataTable();We build arrays for the headings row and the data rows. This gives us the raw data for that smaller table.We convert this raw data into the format needed to build a PDF table and store it in a tbl1_rows array:var tbl1_rows = []; // the data from the first tableFinally we clone the PDF table data from the main table, then replace its data with our tbl1_rows data – and then we insert this new table object into the PDF:var clone = structuredClone(doc.content[1]);clone.table.body = tbl1_rows;doc.content.splice(1, 0, clone);The end result:So, basically, the approach is to just create one PDF for the main table – and splice in the extra data for that additional table, that you also want to display in the same PDF.Here is the full code for reference: $(document).ready(function() { $('#example1').DataTable(); $('#example2').DataTable({ dom: 'Brftip', buttons: [ { text: 'PDF Export', extend: 'pdfHtml5', customize: function ( doc ) { var table1 = $('#example1').DataTable(); var headings = table1.columns().header().to$().map(function(i,e) { return e.innerHTML;}).get();; var data = table1.rows().data(); var tbl1_rows = []; // the data from the first table // PDF header row for the first table: tbl1_rows.push( $.map( headings, function ( d ) { return { text: typeof d === 'string' ? d : d+'', style: 'tableHeader' }; } ) ); // PDF body rows for the first table: for ( var i = 0, ien = data.length ; i < ien ; i++ ) { tbl1_rows.push( $.map( data[i], function ( d ) { if ( d === null || d === undefined ) { d = ''; } return { text: typeof d === 'string' ? d : d+'', style: i % 2 ? 'tableBodyEven' : 'tableBodyOdd' }; } ) ); } // create a clone of the main PDF table (where // content[0] is the PDF's main heading, and content[1] // is the main table: var clone = structuredClone(doc.content[1]); //replace the main table data with the tbl1_rows data: clone.table.body = tbl1_rows; // insert that cloned table into the main PDF doc, between // the PDF title and the main table: doc.content.splice(1, 0, clone); } } ] });} ); Demo

Basic Table Example1

User Priority	Average MTTR(Hrs)	Total Number Of Tickets
1-Critical	164.12	182
2-High	190.23	498
3-Moderate	908.93	1511
4-Low	211.43	1817

Basic Table Example2

Tower	CC	Cluster	Assignment Group	Ticket Priority	Average MTTR(Hrs)	Total Number Of Tickets
MANUFACTURING 01	RICHMOND GROUPS	Workbrain - Infor HCM Version 6.1.2 - Enterprise Workforce Management	SN PM USA Workbrain WFM and ETM	1 - Critical	4.89	5
MANUFACTURING 02	RICHMOND GROUPS	Workbrain - Infor HCM Version 6.1.2 - Enterprise Workforce Management	SN PM USA Workbrain WFM and ETM	1 - Critical	4.89	5
MANUFACTURING 03	RICHMOND GROUPS	Workbrain - Infor HCM Version 6.1.2 - Enterprise Workforce Management	SN PM USA Workbrain WFM and ETM	1 - Critical	4.89	5
MANUFACTURING 04	RICHMOND GROUPS	Workbrain - Infor HCM Version 6.1.2 - Enterprise Workforce Management	SN PM USA Workbrain WFM and ETM	1 - Critical	4.89	5
MANUFACTURING 05	RICHMOND GROUPS	Workbrain - Infor HCM Version 6.1.2 - Enterprise Workforce Management	SN PM USA Workbrain WFM and ETM	1 - Critical	4.89	5
MANUFACTURING 06	RICHMOND GROUPS	Workbrain - Infor HCM Version 6.1.2 - Enterprise Workforce Management	SN PM USA Workbrain WFM and ETM	1 - Critical	4.89	5
MANUFACTURING 07	RICHMOND GROUPS	Workbrain - Infor HCM Version 6.1.2 - Enterprise Workforce Management	SN PM USA Workbrain WFM and ETM	1 - Critical	4.89	5
MANUFACTURING 08	RICHMOND GROUPS	Workbrain - Infor HCM Version 6.1.2 - Enterprise Workforce Management	SN PM USA Workbrain WFM and ETM	1 - Critical	4.89	5
MANUFACTURING 09	RICHMOND GROUPS	Workbrain - Infor HCM Version 6.1.2 - Enterprise Workforce Management	SN PM USA Workbrain WFM and ETM	1 - Critical	4.89	5
MANUFACTURING 10	RICHMOND GROUPS	Workbrain - Infor HCM Version 6.1.2 - Enterprise Workforce Management	SN PM USA Workbrain WFM and ETM	1 - Critical	4.89	5
MANUFACTURING 11	RICHMOND GROUPS	Workbrain - Infor HCM Version 6.1.2 - Enterprise Workforce Management	SN PM USA Workbrain WFM and ETM	1 - Critical	4.89	5
MANUFACTURING 12	RICHMOND GROUPS	Workbrain - Infor HCM Version 6.1.2 - Enterprise Workforce Management	SN PM USA Workbrain WFM and ETM	1 - Critical	4.89	5
MANUFACTURING 13	RICHMOND GROUPS	Workbrain - Infor HCM Version 6.1.2 - Enterprise Workforce Management	SN PM USA Workbrain WFM and ETM	1 - Critical	4.89	5
MANUFACTURING 14	RICHMOND GROUPS	Workbrain - Infor HCM Version 6.1.2 - Enterprise Workforce Management	SN PM USA Workbrain WFM and ETM	1 - Critical	4.89	5
MANUFACTURING 15	RICHMOND GROUPS	Workbrain - Infor HCM Version 6.1.2 - Enterprise Workforce Management	SN PM USA Workbrain WFM and ETM	1 - Critical	4.89	5

AcknowledgementsI took some of the above approach from the official DataTables source code for PDF exports:buttons.html5.jsUpdateFor future visitors to this question:If you want to further format the report, you can take a look at the PDFMake documentation and use their playground to try different things for yourself.For example, if you want to add a space between the two tables, you can assign a bottom margin to the first table:clone.margin = [ 0, 0, 0, 10 ];More examples: You can change the row striping and cell borders. See How to remove header in PDF export result from DataTable and change color table fill to white?

Advertisement

Answer