I am currently exploring how to use Html2Canvas in combination with jsPDF to create a PDF from HTML content. I am following a tutorial that guides me through the process.
My goal is to render a basic Hello World h1, and while I do get the PDF with the text, it appears stretched out. I'm struggling to adjust it properly for correct display. You can see the issue in the image below:
https://i.sstatic.net/eFCp2.png
I have attempted altering the PDF object configuration like so: pdf.internal.scaleFactor = 2.25;
However, this adjustment doesn't seem to have any effect. I've tested other configuration changes without success as well.
<template>
<div>
<a @click="print">Print</a>
<div id="nodeToRenderAsPDF">
<h1>Hello World</h1>
</div>
</div>
</template>
<script>
import jsPDF from 'jspdf'
import html2canvas from 'html2canvas'
export default {
name: 'HelloWorld',
props: {
msg: String
},
methods: {
print() {
const filename = 'ThisIsYourPDFFilename.pdf';
html2canvas(document.querySelector('#nodeToRenderAsPDF')).then(canvas => {
let pdf = new jsPDF('p', 'mm', 'a4');
pdf.internal.scaleFactor = 2.25;
pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, 0, 211, 298);
pdf.save(filename);
});
}
}
}
</script>
The output I'm seeing is the distorted element within the PDF. Ideally, I would like to achieve a PDF that displays "Hello World" in the same size as the h1 tag shown on the browser.