Кнопки 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

Наконец, я обнаружил, что проблема заключается не в вложенном div, а в том, что теги имеют отступ в коде, а не в одной строке. Я сообщил об этом в 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>