DataTables Export PDF with 100% Width

Question

I am attempting to export my tables to PDF with a 100% width. I have tried the following but I have been unsuccessful

var settings={};
settings.buttons = [
    {
        extend:'pdfHtml5',
        text:'Export PDF',
        orientation:'landscape',
        customize : function(doc){ 
            doc.styles['table'] = { width:100% }
        }
    }
];
$('.dTable').dataTable(settings);

Answer 1

$(function () {
    $("#table_ID").DataTable({
        "responsive": false,
        "lengthChange": false,
        "autoWidth": false,
        "scrollX": true,
        dom: 'Bfrtip',
        buttons: [
            {
                extend: 'pdfHtml5',
                exportOptions: {
                    columns: [0, 1, 2, 3]
                },
                customize: function (doc) {
                    doc.styles.tableBodyEven.alignment = 'center';
                    doc.styles.tableBodyOdd.alignment = 'center';
                }
            }
        ]
    });
});

Answer 2

var rowCount = document.getElementsByTagName('table')[1].rows.length;
var colCount = document.getElementsByTagName('tbody') 
[0].rows[0].cells.length;
for (i = 0; i < rowCount; i++) {

 for (c = 0; c < colCount; c++) {
     var cellVal = parseFloat(doc.content[1].table.body[1][c].text);
     if (isNaN(cellVal) != true) {
         doc.content[1].table.body[i][c].alignment = 'right';
     }
     else {
         doc.content[1].table.body[i][c].alignment = 'left';
     }
 }

 doc.styles.tableHeader.fontSize = 9;

 doc.defaultStyle.fontSize = 9;

 doc.content[1].table.widths =
     Array(doc.content[1].table.body[0].length + 1).join('*').split('');

};

Answer 3

if (item.table.body[0].length < 10) {
    item.table.widths = Array(item.table.body[0].length +1).join('*').split('');
}

If there are more than 10 columns in dynamic column visibility, this shape query code provides the necessary dynamics.

Answer 4

Hi for me this solution work

customize: function (doc) {
    doc.content[0].table.widths = "*";
}

Answer 5

Please try this is working fine for entire data in centered align and pdf generating in full width: -

customize: function(doc) {
    doc.content[1].table.widths =Array(doc.content[1].table.body[0].length + 1).join('*').split('');
    doc.defaultStyle.alignment = 'center';
    doc.styles.tableHeader.alignment = 'center';
},

Answer 6

This work excellent... Is adaptable. Edited for me. Change the class (.Datatable) for the id or class of your table

customize: function(doc) {
    var colCount = new Array();
    var tr = $('.DataTable tbody tr:first-child');
    var trWidth = $(tr).width();

    var length = $('.DataTable tbody tr:first-child td').length;
    $('.DataTable').find('tbody tr:first-child td').each(function() {
        var tdWidth = $(this).width();
        var widthFinal = parseFloat(tdWidth * 115);
        widthFinal = widthFinal.toFixed(2) / trWidth.toFixed(2);
        if ($(this).attr('colspan')) {
            for (var i = 1; i <= $(this).attr('colspan'); $i++) {
                colCount.push('*');
            }
        } else {
            colCount.push(parseFloat(widthFinal.toFixed(2)) + '%');
        }
    });
    doc.content[1].table.widths = colCount;
}

Answer 7

You can choose the size you want for every column and let them fit the space you need. You just need to make some tuning of this:

"doc.content[1].table.widths = [90,90,90,90,90,90,90,90]; " : {
    extend: 'pdfHtml5',
    orientation: 'landscape',//orientamento stampa
    pageSize: 'A4', //formato stampa
    alignment: "center", //non serve a nnt ma gli dice di stampare giustificando centralmente
    titleAttr: 'PDF',   //titolo bottone
    exportOptions: {// quali colonne vengono mandate in stampa (indice posizionale)
        columns: [ 1,2,3,4,5,6,7,8 ]
    },
    customize : function(doc){ 
        doc.styles.tableHeader.alignment = 'left'; //giustifica a sinistra titoli colonne
        doc.content[1].table.widths = [90,90,90,90,90,90,90,90]; //costringe le colonne ad occupare un dato spazio per gestire il baco del 100% width che non si concretizza mai
    }
}

Answer 8

customize : function(doc){
    var colCount = new Array();
    var length = $('#reports_show tbody tr:first-child td').length;
    console.log('length / number of td in report one record = '+length);
    $('#reports_show').find('tbody tr:first-child td').each(function(){
        if($(this).attr('colspan')){
            for(var i=1;i<=$(this).attr('colspan');$i++){
                colCount.push('*');
            }
        }else{ colCount.push(parseFloat(100 / length)+'%'); }
    });
}

Its working in my case. It count the number of data tag in the header. Then it assign 100 / (no of data tags) width to each of the data tag.

Answer 9

You should look for where it says t.table.widths in the 'pdfmake.js' file and change the value to '*'.

t.table.widths="*"

Answer 10

Found an easier and quicker way to do it.

{
  extend: 'pdf',
  customize: function (doc) {
    doc.content[1].table.widths = 
        Array(doc.content[1].table.body[0].length + 1).join('*').split('');
  }
}

What happens here is as so:

doc.content[1].table.widths is an array of widths for each column, and if each of them is a '*' it means that the table will fit 100% of the page with the columns distributed evenly.

Array(doc.content[1].table.body[0].length + 1) creates an array in the length of all the columns of my table.

.join('*') creates a string from all the cells in the array with a '*' for each.

.split(''); splits it back into an array.

Hope I helped someone along the way.

Answer 11

var dtTbl = tbl.DataTable({
            dom: 'Bt',
            buttons: [{
                    extend: "pdfHtml5",
                    title: "Report",
                    customize: function(doc) {
                        console.log(doc.content)
                        doc.content.splice(0, 0, {
                            margin: [12, 0, 0, 12],
                            alignment: "center",
                        });

                        doc.content[2].table.widths = ["*", "*", "*"];
                    }]
            })

This is what I did and it worked. I only have 3 headers so I inserted three asterisks in the table widths.

Answer 12

After digging and digging I found that you simply need to add a width of '*' for each of the columns. I created a simple function in order to create an array based on the number of td tags and included a colspan check.

var tbl = $('.dTable');
var settings={};
settings.buttons = [
    {
        extend:'pdfHtml5',
        text:'Export PDF',
        orientation:'landscape',
        customize : function(doc){
            var colCount = new Array();
            $(tbl).find('tbody tr:first-child td').each(function(){
                if($(this).attr('colspan')){
                    for(var i=1;i<=$(this).attr('colspan');$i++){
                        colCount.push('*');
                    }
                }else{ colCount.push('*'); }
            });
            doc.content[1].table.widths = colCount;
        }
    }
];
$('.dTable').dataTable(settings);