javascript - html2pdf has increased the size of all the elements than the original HTML one

Question

I am using a js library called html2pdf to render my html file into pdf.

my template:

<div class="container-fluid py-5 bg-light">
  <div class="col-xl-10 bg-white" id="pdf_portion">
    <p>Lots of staff is in this div. I just skip those unnecessary things in this question.</p>
  </div>
</div>

<button class="btn btn-primary" id="download"> download pdf</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.2/html2pdf.bundle.js"></script>

<script type="text/javascript">
  window.onload = function () {
    document.getElementById("download")
        .addEventListener("click", () => {
            const invoice = this.document.getElementById("pdf_portion");
            console.log(invoice);
            console.log(window);
            var opt = {
                margin: 0.8,
                filename: 'myfile.pdf',
                image: { type: 'jpeg', quality: 0.98 },
                html2canvas: { scale: 4 },
                jsPDF: { unit: 'in', format: 'A4', orientation: 'portrait' }
            };
            html2pdf().from(invoice).set(opt).save();
        })
  }
</script>

Now my problem is I cannot resize/zoom-out the pdf. The rendered pdf is a very zoomed-in look than the original HTML page. All element's sizes have increased a lot.

How can I code this such that the pdf will be regular shaped or look like normal?

question from:https://stackoverflow.com/questions/66057838/html2pdf-has-increased-the-size-of-all-the-elements-than-the-original-html-one

Answer 1

Waitting for answers