DataTables Export PDF with 100% Width

问题:

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);

回答1:

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.

回答2:

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);

回答3:

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.

回答4:

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.

回答5:

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
    }
}

回答6:

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

t.table.widths="*"