Datatables buttons pdfHtml5 exportOptions 删除嵌套标签

Question

我正在尝试优化页面的数据tables 按钮 pdfHtml5 导出。 table 数据包含嵌套的 html 标签，这些标签在单元格数据的上方和下方创建额外的 space，这使得 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，而是标签在代码中缩进了而不是在一行上。我已将此报告给 Datatables，我正在此处记录该问题，以防其他人遇到它。

我在 fiddle @davidkonrad 的基础上构建来说明正在发生的事情。
https://jsfiddle.net/lbriquet/7f08n0qa/

在第一行中，嵌套标签在代码中缩进...这会在 PDF 导出的国家/地区名称数据上方和下方产生额外的 space。

在第二行中，我将所有标签放在同一行代码中...并且在 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>

Datatables buttons pdfHtml5 exportOptions 删除嵌套标签

Datatables buttons pdfHtml5 exportOptions to remove nested tags

datatables

nested

datatables-1.10

strip-tags

datatable-buttons