Datatables buttons pdfHtml5 exportOptions um verschachtelte Tags zu entfernen

Question

Ich versuche den Datatables buttons pdfHtml5 Export einer Seite zu optimieren. Die Tabellendaten enthalten verschachtelte HTML-Tags, die zusätzlichen Raum oberhalb und unterhalb der Zellendaten schaffen, wodurch die PDF sehr lang wird.

Der Text in meiner Zelle ist in zwei verschachtelte <div> und eine <p> verpackt. In dem PDF-Export, ich brauche nur den Inhalt des <p>

<td> 
    <div class="flagimg" style="background-image: url(...)"> 
    <div class="flagtext"> 
     <p>name of country</p> 
    </div> 
    </div> 
</td> 

versuche ich verschachtelte HTML-Tags mit OptionenExportieren zu entfernen, aber ich bin nicht sicher, wie die Syntax korrekt zu schreiben. Kann mir jemand dabei helfen?

$(document).ready(function() { 
    var buttonCommon = { 
    exportOptions: { 
     format: { 
     body: function(data, column, row) { 
      data = data.replace(/<div class="flagtext"\">/, ''); 
      data = data.replace(/<.*?>/g, ""); 
      return data; 
     } 
     } 
    } 
    }; 
    var oTable = $('#example').DataTable({ 
    dom: 'Bfrtip', 
    buttons: [ 
     $.extend(true, {}, buttonCommon, { 
      extend: 'copyHtml5' 
     }), 
     $.extend(true, {}, buttonCommon, { 
      extend: 'excelHtml5' 
     }), 
     $.extend(true, {}, buttonCommon, { 
      extend: 'pdfHtml5' 
     }) 
    ] 
    }); 
}) 

Answer 1

Ich entdeckte schließlich, dass das Problem doch nicht die verschachtelte div ist, sondern vielmehr, dass die Tags in den Code eingerückt sind, anstatt auf einer Linie zu sein. Ich habe das bei Datatables gemeldet und dokumentiere das Problem hier, falls jemand anderes dazu kommt.

Ich habe auf der Fiddle @davidkonrad gebaut, um zu veranschaulichen, was passiert.
https://jsfiddle.net/lbriquet/7f08n0qa/

In der ersten Zeile werden die verschachtelten Tags im Code eingerückt sind ... erzeugt diese zusätzlichen Raum über und unter den Ländernamen Daten in der PDF-Export.

In der zweiten Zeile habe ich alle Tags in der gleichen Codezeile ... und keine zusätzlichen Abstände im PDF-Export erzeugt.

<table id="example" width="100%" border="0" cellspacing="0" cellpadding="0" > 
    <thead> 
    <tr> 
     <th>Name</th> 
     <th>Position</th> 
     <th>Office</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td> 
     <div class="myclass"><a href="#">Company name</a> 
     </div> 
     </td> 
     <td> 
     <div class="flagimg" style="background-image: url(#"> 
      <div class="flagtext"> 
      <p>Country name</p> 
      </div> 
     </div> 
     </td> 
     <td> 
     <div class="myclass">Product sold</div> 
     </td> 
    </tr> 
    <tr> 
     <td> 
     <div class="myclass"><a href="#">Company name</a> 
     </div> 
     </td> 
     <td><div class="flagimg" style="background-image: url(#)"><div class="flagtext"><p>Country name</p></div></div> 
     </td> 
     <td> 
     <div class="myclass">Product sold</div> 
     </td> 
    </tr> 
    </tbody> 
</table>