DatatablesボタンpdfHtml5ネストされたタグを削除するためのexportOptions

Question

私は、DatatablesボタンpdfHtml5ページのエクスポートを最適化しようとしています。テーブルデータには、セルデータの上下に余分なスペースを作成するネストされたHTMLタグが含まれているため、PDFが非常に長くなります。

セル内のテキストは、2つのネストされた<div>と<p>にラップされています。 PDFエクスポートでは、私は私がexportOptionsを使用して、ネストされたHTMLタグを削除しようとしている<p>

<td> 
    <div class="flagimg" style="background-image: url(...)"> 
    <div class="flagtext"> 
     <p>name of country</p> 
    </div> 
    </div> 
</td> 

の内容を必要とするが、私は正しく構文を記述するかどうかはわかりません。誰もこれで私を助けることができますか？

$(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要素ではないことを発見しではなく、タグは、代わりに1本のライン上にあるのコードにインデントされていること。私はこれをDatatablesに報告しました。他の誰かがそれに遭遇した場合に、ここで問題を文書化しています。

私は何が起こっているのかを説明するために作った@davidkonradを作った。
https://jsfiddle.net/lbriquet/7f08n0qa/

最初の行では、ネストされたタグがコード内でインデントされています。これは、PDFエクスポートの国名データの上下に余分なスペースを生成します。

2行目では、すべてのタグを同じコード行に入れました...そして、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>