数据表按钮pdfHtml5 exportOptions删除嵌套标签

-1

我想优化页面的数据表按钮pdfHtml5出口。表格数据包含嵌套的html标签，它们在单元格数据的上方和下方创建额外的空间，这使得PDF非常长。数据表按钮pdfHtml5 exportOptions删除嵌套标签

在我的单元格的文本被包裹在两个嵌套<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' 
     }) 
    ] 
    }); 
})

来源

2016-07-28 lbriquet

我终于发现，这个问题是不是在所有的嵌套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-29 11:31:59 lbriquet

数据表按钮pdfHtml5 exportOptions删除嵌套标签

回答

相关问题