html2pdf starts printing halfway down the page - html2pdf

Question

I'm trying out HTML2PDF javascript.
function createPDF(){
var element = document.getElementById('printMe');
var opt = {
margin: 1,
filename: 'myfile.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 1 },
jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
};
When I use this the pdf converts etc but it appears halfway down the first page. All of the content is encapsulated in a div
<div id="printMe" style="padding: 20px;padding-right:30px;">.....</div>
I've tried setting the height and removing almost all the content but it still seems to be placing it in the middle of the page as the starting point.
Is there some way of forcing the code to start at the top of the page?

Answer 1

Add scrollY: 0 to the html2canvas object in the html2pdf options:
var opt = {
margin: 1,
filename: 'myfile.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 1, scrollY: 0 },
jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
};

Answer 2

I solved the issue.
The movement in position of the print is affected by the scroll position of the window. So if the button to create the PDF is at the top of the page and you click it places the text at the top of the PDF. If the button is placed in the visible area of the page and you scroll down until it is at the top of the page - the amount you've scrolled is added to the top of the PDF document.
document.body.scrollTop = 0; // For Safari
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
I used this code snippet to solve the issue. When I go to print I scroll to the top of the document before creating the PDF.

Answer 3

A combination of scrollX, scrollY, x and y worked for me to force the PDF generation from the top left:
const opts = {
margin: 0,
filename 'result.pdf',
image: { type: 'jpeg', quality: 1 },
html2canvas: {
backgroundColor: "#fff",
scale: window.devicePixelRatio,
y: 0,
x: 0,
scrollY: 0,
scrollX: 0,
windowWidth: 800,
},
jsPDF: { unit: 'px', format: [800, 1600], orientation: 'portrait', precision: 32 }
};
A hack to enforce the same result over all devices is to temporarily set the screen width to the configured windowWidth (this case 800px), e.g., using document.body.style.width = '800px', before creating the PDF, and setting it back to 100% after creating the PDF.