Problem with Screen resolution and zoom in browser when generating pdf file from HTML with JSPDF and Html2Canvas

I’m trying to create a script allowing to create a pdf file from an HTML page. I’m using the library jspdf, html2canvas and jquery. It’s working correctly when the zoom in the browser is 100% but I have issues when the screen resolution is changed or if the zoom in the browser is changed.

    			function generatePDF() {				
    			
    				html2canvas(document.getElementById('content'), { scale: 1, width: 2000, height: 9000 }).then(canvas => {
    					var imgData = canvas.toDataURL("image/jpeg");
    					var pdf = new jsPDF('p', 'mm', [520, 1080]);
    					pdf.addImage(imgData, 'JPEG', 10, 10);
    					
    					pdf.save("Test.pdf");
    				});
    						
    			}

I tried several updates (margin, canvas, …)but I don’t find really a solution for that.

Could you please help me with that ?

Thanks in advance for your help.

[amadese]

Hi,

It’s me again. I’m using this version of jspdf: jspdf.pr2665.js (see the example on http://weihuiguo.com/) for getting a first example for creating the pdf file.

My code there with the updates from this post:

<script src="jspdf.pr2665.js"></script>
<script src="jquery-2.1.4.min.js"></script>
<script src="html2canvas.min.js"></script>
<!-- html2canvas 1.0.0-alpha.11 or higher version ihttps://html2canvas.hertzen.com/dist/html2canvas.min.jss needed -->
<script>
    function download() {
        let pdf = new jsPDF('p', 'pt', 'a4');
        let srcwidth = document.getElementById('toPDF').scrollWidth;

        pdf.html(document.getElementById('toPDF'), {
            html2canvas: {
				scale: 595.26 / srcwidth, //595.26 is the width of A4 page
				scrollY: 0
            },
            filename: 'jspdf',
            x: 0,
            y: 0,
            callback: function () {
                window.open(pdf.output('bloburl'));
            }
        });

    }
</script>

It’s working correctly after applying your comment from this page.

If I replace jspdf.pr2665.js by jspdf.js from the folder src on the master branch, the code is not working (the error “pdf.html is not a function”, could you help me please ? I don’t know what is the problem and how to solve that. Regards,

[amadese]

The reason the content is not in the center is that your scale is too small. Try scale: 595.28 / srcwidth, instead of 500. Note that 595.26 is the width of A4, which is your pdf page size.

Thank you very much it’s working now 😃