Загрузка div в PDF-файл с помощью jsPDF: текст вырезается вместо смены страницы (Firefox / IE) - PullRequest
Новая
       8

Загрузка div в PDF-файл с помощью jsPDF: текст вырезается вместо смены страницы (Firefox / IE)

0 голосов
/ 04 мая 2018

У меня есть файл с div и двумя кнопками: одна для печати div, другая для загрузки в формате pdf.

Функция печати работает отлично, но у функции загрузки есть некоторые проблемы: Я использую jsPDF ( включено здесь ) и он отлично работает, когда мой контент может уместиться на одной странице, но если ему нужно более одной страницы, он не будет писать на других страницах (но количество сгенерированных страниц правильное).

РЕДАКТИРОВАТЬ: Протестировано с:

  • Google Chrome 66.0: отлично работает
  • Firefox 59.0.3: не работает
  • Internet Explorer 11.0: не работает

(Очевидно, что компания работает только с Firefox и IE o /)

Вот мой код:

РЕДАКТИРОВАТЬ: JSFiddle Link

/! \ Ошибка при попытке запуска фрагмента на SO. 

    var specialElementHandlers = {
      '#editor': function(element, renderer) {
        return true;
      }
    };

    $('#generatePDF').click(function() {
      var pdf = new jsPDF();
      pdf.fromHTML($('#myDivToPrint').html(), 15, 15, {
        'width': 170,
        'elementHandlers': specialElementHandlers,
        'pagesplit': true
      });
      pdf.save('file_generated.pdf');
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"></script>
<div class="myDivToPrint" id="myDivToPrint">
  Devis : 1200€ TTC

  <ul>
    <li>Phasellus a odio vitae tortor mattis sodales malesuada ut orci.</li>
    <li>Maecenas laoreet, nisl quis gravida ullamcorper.</li>
    <li>ipsum tortor semper diam, non lacinia ipsum lorem id orci.</li>
    <br><br>
    <li>Aliquam malesuada velit at pharetra pellentesque.</li>
    <li>Nunc id varius nisi.</li>
    <li>Mauris posuere a nisl nec rutrum.</li>
    <br><br>
    <li>Vestibulum hendrerit magna sed felis rhoncus.</li>
    <li>vitae pharetra ex sagittis.</li>
    <li>Nunc bibendum ultrices nibh a tempus.</li>
    <li>Proin ultrices ipsum non posuere blandit.</li>
    <li>In imperdiet, orci non mattis commodo.</li>
    <br><br>
    <li>libero risus tristique mi, eget vehicula felis ante et turpis.</li>
    <li>Mauris elementum mi elit.</li>
    <li>Maecenas nec justo eget leo laoreet auctor vel quis odio.</li>
    <li>Morbi eget scelerisque risus.</li>
    <li>tincidunt aliquet nulla.</li>
    <br><br>
    <li>Quisque eget lectus vel elit dictum varius vitae non arcu.</li>
    <li>Donec elementum lorem quis finibus varius.</li>
    <li>Suspendisse id erat vel purus egestas finibus at sed lorem.</li>
    <li>Ut auctor erat quis magna consectetur, id sollicitudin sapien elementum.</li>
    <li>Fusce placerat turpis eu efficitur cursus.</li>
    <br><br>
    <li>Vestibulum hendrerit magna sed felis rhoncus.</li>
    <li>vitae pharetra ex sagittis.</li>
    <li>Nunc bibendum ultrices nibh a tempus.</li>
    <li>Proin ultrices ipsum non posuere blandit.</li>
    <li>In imperdiet, orci non mattis commodo.</li>
    <br><br>
    <li>libero risus tristique mi, eget vehicula felis ante et turpis.</li>
    <li>Mauris elementum mi elit.</li>
    <li>Maecenas nec justo eget leo laoreet auctor vel quis odio.</li>
    <li>Morbi eget scelerisque risus.</li>
    <li>tincidunt aliquet nulla.</li>
    <br><br>
    <li>Quisque eget lectus vel elit dictum varius vitae non arcu.</li>
    <li>Donec elementum lorem quis finibus varius.</li>
    <li>Suspendisse id erat vel purus egestas finibus at sed lorem.</li>
    <li>Ut auctor erat quis magna consectetur, id sollicitudin sapien elementum.</li>
    <li>Fusce placerat turpis eu efficitur cursus.</li>
    <br><br>
    <li>libero risus tristique mi, eget vehicula felis ante et turpis.</li>
    <li>Mauris elementum mi elit.</li>
    <li>Maecenas nec justo eget leo laoreet auctor vel quis odio.</li>
    <li>Morbi eget scelerisque risus.</li>
    <li>tincidunt aliquet nulla.</li>
    <br><br>
    <li>Quisque eget lectus vel elit dictum varius vitae non arcu.</li>
    <li>Donec elementum lorem quis finibus varius.</li>
    <li>Suspendisse id erat vel purus egestas finibus at sed lorem.</li>
    <li>Ut auctor erat quis magna consectetur, id sollicitudin sapien elementum.</li>
    <li>Fusce placerat turpis eu efficitur cursus.</li>
    <br><br>
    <li>Vestibulum hendrerit magna sed felis rhoncus.</li>
    <li>vitae pharetra ex sagittis.</li>
    <li>Nunc bibendum ultrices nibh a tempus.</li>
    <li>Proin ultrices ipsum non posuere blandit.</li>
    <li>In imperdiet, orci non mattis commodo.</li>
    <br><br>
    <li>libero risus tristique mi, eget vehicula felis ante et turpis.</li>
    <li>Mauris elementum mi elit.</li>
    <li>Maecenas nec justo eget leo laoreet auctor vel quis odio.</li>
    <li>Morbi eget scelerisque risus.</li>
    <li>tincidunt aliquet nulla.</li>
    <br><br>
    <li>Quisque eget lectus vel elit dictum varius vitae non arcu.</li>
    <li>Donec elementum lorem quis finibus varius.</li>
    <li>Suspendisse id erat vel purus egestas finibus at sed lorem.</li>
    <li>Ut auctor erat quis magna consectetur, id sollicitudin sapien elementum.</li>
    <li>Fusce placerat turpis eu efficitur cursus.</li>
    <br><br>
    <li>libero risus tristique mi, eget vehicula felis ante et turpis.</li>
    <li>Mauris elementum mi elit.</li>
    <li>Maecenas nec justo eget leo laoreet auctor vel quis odio.</li>
    <li>Morbi eget scelerisque risus.</li>
    <li>tincidunt aliquet nulla.</li>
    <br><br>
    <li>Quisque eget lectus vel elit dictum varius vitae non arcu.</li>
    <li>Donec elementum lorem quis finibus varius.</li>
    <li>Suspendisse id erat vel purus egestas finibus at sed lorem.</li>
    <li>Ut auctor erat quis magna consectetur, id sollicitudin sapien elementum.</li>
    <li>Fusce placerat turpis eu efficitur cursus.</li>
    <br><br>
    <li>Vestibulum hendrerit magna sed felis rhoncus.</li>
    <li>vitae pharetra ex sagittis.</li>
    <li>Nunc bibendum ultrices nibh a tempus.</li>
    <li>Proin ultrices ipsum non posuere blandit.</li>
    <li>In imperdiet, orci non mattis commodo.</li>
    <br><br>
    <li>libero risus tristique mi, eget vehicula felis ante et turpis.</li>
    <li>Mauris elementum mi elit.</li>
    <li>Maecenas nec justo eget leo laoreet auctor vel quis odio.</li>
    <li>Morbi eget scelerisque risus.</li>
    <li>tincidunt aliquet nulla.</li>
    <br><br>
    <li>Quisque eget lectus vel elit dictum varius vitae non arcu.</li>
    <li>Donec elementum lorem quis finibus varius.</li>
    <li>Suspendisse id erat vel purus egestas finibus at sed lorem.</li>
    <li>Ut auctor erat quis magna consectetur, id sollicitudin sapien elementum.</li>
    <li>Fusce placerat turpis eu efficitur cursus.</li>
    <br><br>
    <li>Vestibulum hendrerit manga sed felis rhoncus.</li>
    <li>vitae pharetra ex sagittis.</li>
    <li>Nunc bibendum ultrices nibh a tempus.</li>
    <li>Proin ultrices ipsum non posuere blandit.</li>
    <li>In imperdiet, orci non mattis commodo.</li>
    <br><br>
    <li>libero risus tristique mi, eget vehicula felis ante et turpis.</li>
    <li>Mauris elementum mi elit.</li>
    <li>Maecenas nec justo eget leo laoreet auctor vel quis odio.</li>
    <li>Morbi eget scelerisque risus.</li>
    <li>tincidunt aliquet nulla.</li>
    <br><br>
    <li>Quisque eget lectus vel elit dictum varius vitae non arcu.</li>
    <li>Donec elementum lorem quis finibus varius.</li>
    <li>Suspendisse id erat vel purus egestas finibus at sed lorem.</li>
    <li>Ut auctor erat quis magna consectetur, id sollicitudin sapien elementum.</li>
    <li>Fusce placerat turpis eu efficitur cursus.</li>
    <br><br>
    <li>libero risus tristique mi, eget vehicula felis ante et turpis.</li>
    <li>Mauris elementum mi elit.</li>
    <li>Maecenas nec justo eget leo laoreet auctor vel quis odio.</li>
    <li>Morbi eget scelerisque risus.</li>
    <li>tincidunt aliquet nulla.</li>
  </ul>
  <div id="editor"></div>
</div>

<div class="contenuCentreTPC">
  <button class="button-blue" id="generatePDF">Télécharger</button>
</div>

Кнопка работает отлично, но когда я достигаю конца первой страницы, окно предупреждения предупреждает меня, что этот pdf-файл содержит ошибку, а следующие страницы пусты:

End of 1st page

Знаете ли вы, что вызывает эту ошибку? И как это исправить?

Спасибо за чтение!

...