Inclure les couleurs d'arrière-plan des colonnes de table lors de l'exportation au format .xls/.pdf

Question

J'utilise jQuery DataTables pour afficher une table comportant plusieurs couleurs de cellule en fonction de la disponibilité des employés au cours de certains mois. J'ai inclus l'extension 'Boutons' des DataTables pour que la table puisse être exportée vers les formats .pdf, .xls. Cependant, je ne suis pas capable d'exporter la table avec toutes ses couleurs de cellule. Les données textuelles dans les cellules sont exportées parfaitement, mais la couleur n'est pas reflétée.

Quelqu'un peut-il suggérer une solution pour cela? J'ai vérifié leur documentation, mais je n'ai trouvé aucune mention d'une API qui permette de l'implémenter.

Voici le code que je l'ai écrit pour réaliser des choses avec des captures d'écran de la sortie

//function to load the forecast data into the table in a proper format 
window.loadData = function (data) { 

    //console.log(data); 
    //create the table body rows 
    $.each(data, function (i, val) { 

     //Append database data here as rows 
     var trow = $('<tr></tr>'); 

     //set the name first 
     var tdName = $('<td style="font-size:9pt;white-space: nowrap;">' + val.name + '</td>'); 

     //append it to the row 
     trow.append(tdName); 

     //append the forecast columns now 
     var tdJan = getTabCol(val, 'jan'); 
     trow.append(tdJan); 
     var tdFeb = getTabCol(val, 'feb'); 
     trow.append(tdFeb); 
     var tdMar = getTabCol(val, 'mar'); 
     trow.append(tdMar); 
     var tdApr = getTabCol(val, 'apr'); 
     trow.append(tdApr); 
     var tdMay = getTabCol(val, 'may'); 
     trow.append(tdMay); 
     var tdJun = getTabCol(val, 'jun'); 
     trow.append(tdJun); 
     var tdJul = getTabCol(val, 'jul'); 
     trow.append(tdJul); 
     var tdAug = getTabCol(val, 'aug'); 
     trow.append(tdAug); 
     var tdSep = getTabCol(val, 'sep'); 
     trow.append(tdSep); 
     var tdOct = getTabCol(val, 'oct'); 
     trow.append(tdOct); 
     var tdNov = getTabCol(val, 'nov'); 
     trow.append(tdNov); 
     var tdDec = getTabCol(val, 'dec'); 
     trow.append(tdDec); 


     //append the row to the table 
     $('#tabForecastBody').append(trow); 


    }); 

    //make the table a datatable 
    var table = $('#tabForecast').DataTable({ 

     "paging": true, 
     "bLengthChange": true, 
     "bFilter": false, 
     "lengthMenu": [[6, 15, 25, 30], [6, 15, 25, 30]], 
     "language": { 
      "emptyTable": "No data to show" 
     }, 
     dom: 'Bfrtip', 
     buttons: [ 
      //'copy', 'csv', 'excel', 'pdf', 'print' 
      { 
       extend: 'excelHtml5', 
       title: 'Resource Allocation' 
      }, 
      { 
       extend: 'pdfHtml5', 
       title: 'Resource Allocation', 
       //text: '<span class="glyphicon glyphicon-search"></span>' 
      }, 
      //{ 
      // extend: 'csvHtml5', 
      // title: 'Resource Allocation' 
      //}, 
      //{ 
      // extend: 'copyHtml5', 
      // title: 'Resource Allocation' 
      //}, 
      { 
       extend: 'print', 
       title: 'Resource Allocation', 
       //exportOptions: { 
       // columns: [0, 1, 2, 5] 
       //} 
      } 
     ], 
     order: [], 
     columnDefs: [{ "targets": 0, "orderable": false }, 
     { "targets": 1, "orderable": false }, 
     { "targets": 2, "orderable": false }, 
     { "targets": 3, "orderable": false }, 
     { "targets": 4, "orderable": false }, 
     { "targets": 5, "orderable": false }, 
     { "targets": 6, "orderable": false }, 
     { "targets": 7, "orderable": false }, 
     { "targets": 8, "orderable": false }, 
     { "targets": 9, "orderable": false }, 
     { "targets": 10, "orderable": false }, 
     { "targets": 11, "orderable": false }, 
     { "targets": 12, "orderable": false }] 

    }); 

} 

//function to return the value of table column 
window.getTabCol = function (val, key) { 

    var td = null; 

    for (var prop in val) { 

     if (prop === key) { 

      //now split the prop text based on '^' 
      var allData = val[prop].split('^'); 

      //now create the td 
      td = $('<td style = "background-color:' + allData[1] + ';cursor:pointer;color:black;font-size:10pt;text-align:center;" title = "' + allData[0] + '" >' + allData[2] + '</td>'); 

     } 
    } 

    //now return the newly created column 
    return td; 

} 

Answer 1

En getTabCol(), ajoutez la couleur extraite comme attribut à chaque élément <td> ainsi, vous pouvez l'appeler export-color:

... 
td = $('<td export-color="'+allData[1]+'" style = "background-color:' + allData[1] + ';cursor:pointer;color:black;font-size:10pt;text-align:center;" title = "' + allData[0] + '" >' + allData[2] + '</td>'); 
... 

utiliser maintenant la fonction customize pour extraire export-color pour chaque cellule, et mettre à jour avec cette valeur pdf fillColor de la cellule:

button: [ 
    { 
     extend : 'pdfHtml5', 
     customize: function(doc) { 
      for (var r=1;r<doc.content[1].table.body.length;r++) { 
       var row = doc.content[1].table.body[r]; 
       for (c=0;c<row.length;c++) { 
        var exportColor = table 
             .cell({row: r-1, column: c}) 
             .nodes() 
             .to$() 
             .attr('export-color'); 
        if (exportColor) { 
         row[c].fillColor = exportColor; 
        } 
       } 
      } 
     } 
    }, 
    ... 
] 

Vous pouvez changer la couleur du texte de chaque cellule en utilisant bien

row[c].color = 'red'; 

Le style par défaut est un effet rayé où chaque cellule ont un style (une classe CSS) comme .tableBodyOdd et ainsi de suite. Vous pouvez réinitialiser ceci ou utiliser une autre classe par

row[c].style = 'cssClass';