jsPDF: 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.

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 26 (5 by maintainers)

Commits related to this issue

Update html.js Fix issue #2766 margin-top issue with zoom-in'ed page — committed to kakugiki/jsPDF by kakugiki 4 years ago

Most upvoted comments

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 on Jul 31, 2020

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>

<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,

It’s worked.

mengheangrat on Feb 26, 2021

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 😃

amadese on Jul 23, 2020

I checked your test case and it works correctly for me if I use the correct jsdpf/html2canvas files. For the jsPDF files you need to run npm run build first. The files in dist are only updated with each release. When I use html2canvas@1.0.0.rc.1 I get this file: html.pdf

HackbrettXXX on Jul 21, 2020