web-dev-qa-db-fra.com

Export DataTables PDF avec 100% de largeur

J'essaie d'exporter mes tables vers PDF avec une largeur de 100%. J'ai essayé ce qui suit mais j'ai échoué

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

J'ai trouvé un moyen plus simple et plus rapide de le faire.

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

Ce qui se passe ici est le suivant:

doc.content[1].table.widths Est un tableau de largeurs pour chaque colonne, et si chacune d'entre elles est un '*' Cela signifie que le tableau s'adaptera à 100% de la page avec les colonnes réparties uniformément.

Array(doc.content[1].table.body[0].length + 1) crée un tableau dans la longueur de toutes les colonnes de ma table.

.join('*') crée une chaîne à partir de toutes les cellules du tableau avec un '*' pour chacune.

.split(''); le divise en un tableau.

J'espère que j'ai aidé quelqu'un en cours de route.

40
Rabbi Shuki Gur

Après avoir creusé et creusé, j'ai constaté que vous devez simplement ajouter une largeur de '*' pour chacune des colonnes. J'ai créé une fonction simple afin de créer un tableau basé sur le nombre de balises td et inclus une vérification colspan.

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
Douglas Cottrell
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)+'%'); }
    });
}

Cela fonctionne dans mon cas. Il compte le nombre de balises de données dans l'en-tête. Ensuite, il attribue une largeur de 100/(pas de balises de données) à chacune des balises de données.

2
Umar Asghar
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 = ["*", "*", "*"];
                    }]
            })

C'est ce que j'ai fait et cela a fonctionné. Je n'ai que 3 en-têtes, j'ai donc inséré trois astérisques dans les largeurs de table.

1
wayne

Vous pouvez choisir la taille souhaitée pour chaque colonne et les laisser s'adapter à l'espace dont vous avez besoin. Vous avez juste besoin de faire quelques réglages:

"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
    }
}
1
Giuliano Knoke

Vous devriez chercher où il est dit t.table.widths dans le fichier 'pdfmake.js' et changer la valeur en '*'.

t.table.widths = "*"

0
Lukas Correa

Ce travail excellent ... Est adaptable. Édité pour moi. Modifiez la classe (.Datatable) pour l'ID ou la classe de votre 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;
}
0
Josué Leo Moreno