JsPDF scale to size?

I currently have the following issue:

I have a specific DIV container that I want to generate a PDF file from. I’m using the HTML2PDF.JS scripts from ekoopmans (https://www.npmjs.com/package/html2pdf.js/v/0.9.0)

The only thing is, I want it to look like a regular print.

Print view: https://i.stack.imgur.com/s9ap7.jpg

PDF export: https://i.stack.imgur.com/hDeMW.jpg

It seems like the PDF export is zoomed in.

Is there any rule I am missing in my code? or is there a workaround? Code:

<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>

All the help is really appreciated!

Answer

Fixed the issue!

Had to change the HTML2Canvas size, then JsPDF did the rest.

<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>

Advertisement

Answer