Кнопки Datatables pdfHtml5 exportOptions для удаления вложенных тегов

Question

Я пытаюсь оптимизировать кнопки Datatables pdfHtml5 экспорта страницы. Данные таблицы содержат вложенные теги html, которые создают дополнительное пространство выше и ниже данных ячейки, что делает PDF очень длинным.

Текст в моей ячейке завернут в два вложенных <div> и <p>. В экспорте PDF, мне нужно только содержимое <p>

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

Я пытаюсь удалить вложенные HTML-теги с помощью exportOptions, но я не знаю, как писать синтаксис правильно. Кто-нибудь может мне с этим помочь?

$(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

я, наконец, обнаружил, что проблема не вложенная ДИВ в конце концов, а то, что теги отступом в коде вместо того, чтобы быть на одной линии. Я сообщил об этом в Datatables, и я документирую проблему здесь, если кто-то еще столкнется с ней.

Я построил на скрипке @ davidkonrad, чтобы проиллюстрировать, что происходит.
https://jsfiddle.net/lbriquet/7f08n0qa/

В первом ряду, вложенные теги отступом в коде ... это создает дополнительное пространство выше и ниже данных названий стран в экспорте PDF.

Во второй строке я поместил все теги в одну строку кода ... и в экспорте PDF не создается дополнительный интервал.

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