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 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…