Datatables 버튼 pdfHtml5 중첩 태그를 제거하기위한 exportOptions

Question

Datatables 버튼 pdfHtml5 페이지 내보내기를 최적화하려고합니다. 표 데이터에는 중첩 된 HTML 태그가 포함되어있어 셀 데이터 위와 아래에 추가 공간을 만들어 PDF를 매우 길게 만듭니다.

내 셀의 텍스트는 두 개의 중첩 된 <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없는 것을 발견, 하지만 태그 대신 한 줄에 존재의 코드에 들여 않고있다. 나는 이것을 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>