Блог

В настоящее время у меня следующая проблема:

У меня есть определенный контейнер DIV, из которого я хочу сгенерировать файл PDF. Я использую HTML2PDF.JS сценарии от ekoopmans (https://www.npmjs.com/package/html2pdf.js/v/0.9.0 )

Единственное, я хочу, чтобы это выглядело как обычная печать.

Вид печати: https://i.stack.imgur.com/s9ap7.jpg

Экспорт PDF: https://i.stack.imgur.com/hDeMW.jpg

Похоже, что экспорт PDF увеличен.

Есть ли какое-либо правило, которого мне не хватает в моем коде? или есть обходной путь? Код:

 <script>
    function generatePDF(invoiceprint) {
        //prints only with div id printinvoice.
     var printContents = document.getElementById(invoiceprint).innerHTML;
     var originalContents = document.body.innerHTML;

     document.body.innerHTML = printContents;
      // work but not to be expected.
     var element = document.body.innerHTML;
        var opt = {
        margin:       10,
        filename:     'Factuur <?php echo $factuurnaam ?>.pdf',
        image:        { type: 'jpeg', quality: 1 },
        html2canvas:  { dpi: 300, letterRendering: true},
        jsPDF:        { unit: 'mm', format: 'a4', orientation: 'portrait' },
        pagebreak:    { mode: ['avoid-all', 'css'] }
        };
        // Choose the element and save the PDF for our user.
        html2pdf().from(element).set(opt).save();
     document.body.innerHTML = originalContents;
}
    </script>

<button onclick="generatePDF('invoiceprint')" class="btn btn-warning"> <i class="fas fa-file-pdf"></i> Download factuur (PDF)</button>

<div id="invoiceprint">             
    <div class="invoice-box" style="min-width:750px; min-height: 1000px;">
SOME DATA
    </div>
</div>
  

Вся помощь действительно ценится!

Исправлена проблема!

Пришлось изменить размер HTML2Canvas, затем jsPDF сделал все остальное.

 <script>
    function generatePDF(invoiceprint) {
        //prints only with div id printinvoice.
     var printContents = document.getElementById(invoiceprint).innerHTML;
     var originalContents = document.body.innerHTML;

     document.body.innerHTML = printContents;
      // work but not to be expected.
     var element = document.body.innerHTML;
        var opt = {
        margin:       10,
        filename:     'Factuur <?php echo $factuurnaam ?>.pdf',
        image:        { type: 'jpeg', quality: 1 },
        html2canvas:  { dpi: 300, letterRendering: true, width: 1080, height: 1920},
        jsPDF:        { unit: 'mm', format: 'a4', orientation: 'portrait' },
        pagebreak:    { mode: ['avoid-all', 'css'] }
        };
        // Choose the element and save the PDF for our user.
        html2pdf().from(element).set(opt).save();
     document.body.innerHTML = originalContents;
}
    </script>