Datatables buttons pdfHtml5 exportOptions to remove nested tags - datatables

Question

I'm trying to optimize the Datatables buttons pdfHtml5 export of a page. The table data contains nested html tags which are creating additional space above and below the cell data, which makes the PDF very long.
The text in my cell is wrapped in two nested <div> and a <p>. In the PDF export, I only need the contents of the <p>
<td>
<div class="flagimg" style="background-image: url(...)">
<div class="flagtext">
<p>name of country</p>
</div>
</div>
</td>
I'm trying to remove nested html tags using exportOptions, but I'm not sure how to write the syntax correctly. Can anyone help me with this?
$(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

I finally discovered that the problem is not the nested div after all, but rather that the tags are indented in the code instead of being on one line. I've reported this to Datatables and I'm documenting the problem here, in case anyone else runs into it.
I've built on the fiddle #davidkonrad made to illustrate what's happening.
https://jsfiddle.net/lbriquet/7f08n0qa/
In the first row, the nested tags are indented in the code... this produces extra space above and below the country name data in the PDF export.
In the second row I've put all of the tags in the same line of code... and no extra spacing is produced in the PDF export.
<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">Company name
</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">Company name
</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>