0

我正在尝试优化页面的数据表按钮 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'
        } )
    ]
  });
})
4

1 回答 1

0

我终于发现问题毕竟不是嵌套的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>
于 2016-07-29T11:31:59.157 回答