jsPDF не игнорирует div

Я пытаюсь игнорировать div при экспорте в PDF через jsPDF. Вот мой код:

HTML:

<div id="print-this">
<p>Text to print</p>
  <div id="ignore">
    <p>Text To ignore</p>
  </div>
<p>More text to print</p>
</div>
<button id="cmd">Print</button>

Jquery:

$(function () {

  $('#cmd').click(function () {
    var doc = new jsPDF();
    var elementHandler = {
  '#ignore': function (element, renderer) {
    return true;
  }
};
    doc.addHTML($('#print-this')[0], 15, 15, {
      'background': '#fff',
    }, function() {
      doc.save('sample.pdf');
    });
  });
}); 

Вместо игнорирования определенного идентификатора он экспортирует все под id="print-this".

1 ответ

Решение

Супер грязный, но делает свое дело:

$(function() {
  $('#cmd').click(function() {
    $('#ignore').hide(); //before the addHTML()
    var doc = new jsPDF();
    doc.addHTML($('#print-this')[0], 15, 15, {
      'background': '#fff',
    }, function() {
      doc.save('sample.pdf');
    });
    $('#ignore').show(); //and directly after its finished
  });
});

JsFiddle

$("#btnPrint").click(function () {
    $(".canhide").hide();

    makePDF();
    setTimeout(function () {
        $(".canhide").show(); 
    }, 5000);
});

У меня возникла проблема при создании нескольких страниц, просто $(".canhide").show();после makePDF() не скрывает ненужный контент. setTimeout функция спасла меня.

Ты можешь попробовать data-html2canvas-ignore="true",

<div id="print-this">
  <p>Text to print</p>
    <div data-html2canvas-ignore="true"><!-- id="ignore" -->
      <p>Text To ignore</p>
    </div>
  <p>More text to print</p>
</div>
<button id="cmd">Print</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js" 
        integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/"
        crossorigin="anonymous"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
Другие вопросы по тегам