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:
JavaScript
<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!
Advertisement
Answer
Fixed the issue!
Had to change the HTML2Canvas size, then JsPDF did the rest.
JavaScript
<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>