数据按钮pdfHtml5 exportOptions以删除嵌套标记

Question

我正在尝试优化一个页面的“数据表”按钮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>

我正在尝试使用exportOptions删除嵌套的html标记，但我不确定如何正确地编写语法。有人能帮我吗？

$(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 ()，而是标记缩进代码中，而不是放在一行上。我已经向Datatable报告了这个问题，我在这里记录了这个问题，以防其他人碰到它。

我建立在@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>