I spend a day and half trying to solve this .Im trying to get a screenshot of my whole webpage and add it in to a pdf file using jspdf. How can i align it in a way that it looks in a similar manner like we get when use the default print option in the browser. Neat and clean. However in jspdf i dont understand how to extend my data to next page in pdf also . This is what i have tried:

function setScreenshot() {
    html2canvas(document.body).then(
        function (canvas) {
            var extra_canvas = document.createElement("canvas");
            let height = $('body').height();
            let width = $('body').width();
            extra_canvas.setAttribute('width', width);
            extra_canvas.setAttribute('height', height);
            var ctx = extra_canvas.getContext('2d');
            ctx.drawImage(canvas, 0, 0, canvas.width, canvas.height, 0, 0, width, height);
            var dataURL = extra_canvas.toDataURL();
            var img = $(document.createElement('img'));
           doc = new jsPDF({
                unit: 'px',
            });
            let docWidth = doc.internal.pageSize.width
            let docHeight = doc.internal.pageSize.height
            let widthRatio = docWidth / canvas.width
            let heightRatio = docHeight / canvas.height
            doc.addImage(dataURL, 'JPEG', 0, 0, width, height * heightRatio);
            doc.save('ExportFile.pdf');
            $('#screenShot').attr('download', 'Test file.png');
            $('#screenShot')[0].click();

        })
} 

I have also tried changing the canvas size to the that of an a4 sheet like following :

 ctx.drawImage(canvas, 0, 0, canvas.width, canvas.height, 0, 0, 793, 1122);

But again it doesnt work for smaller devices as the image gets stretched out.Any solution to this will be real helpful . Thank you guys .Also suggest if there is an alternate method or library using which i can achieve the same .