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

[amadese]

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.

[pratik-agarwal]

I have similar issue where dowloading a pdf from a 3440x1440 px gets the text smaller in monitors with lower resolution.

[HackbrettXXX]

Seems related to #2781

[amadese]

Hi,

Could you tell me please if this issue is already solved and available in the ZIP package? I would like to test (and thus retrieve the correct version of the libraries with the resolution).

Thanks

[HackbrettXXX]

It's currently on the master branch. So if you download the zip on GitHub the fix should be included.

[kakugiki]

Did you get a chance to test this? FYI, you'll probably need to use html2canvas v1.0.0-rc.1.

[amadese]

Did you get a chance to test this? FYI, you'll probably need to use html2canvas v1.0.0-rc.1.

Hi,

I tested with my text. But I obtain the pdf with a big margin (on the top) and the tables of my html page are not centered in the document as it is in the html. Could you please help me with that ?

Here my code: https://github.com/amadese/PDFGenerator.git

Thanks in advance for your help.

[HackbrettXXX]

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

[kakugiki]

The big margin is caused by options.scrollY of CanvasRenderer in v1.0.0-rc.5. It works just the same if I just change one line of code in html2canvase.1.0.0-rc.5.js
`
// this.ctx.translate(-options.x + options.scrollX, -options.y + options.scrollY); // v1.0.0-rc.5

        this.ctx.translate(-options.x, -options.y); // v1.0.0-rc.1`

[HackbrettXXX]

Good catch! I guess we can just pass {scrollX: 0, scrollY: 0} to html2canvas if the user of pdf.html() didn't pass anything else. @kakugiki could you prepare a pull request?

[kakugiki]

@HackbrettXXX Good point! will do. In the meantime, @amadese you can try pass scrollY from your download().

pdf.html(document.getElementById('toPDF'), { filename: 'pdf', html2canvas: { // backgroundColor: '#fdf5e8', scrollY: 0 }, callback: function () { window.open(pdf.output('bloburl')); } });

[amadese]

@HackbrettXXX Good point! will do. In the meantime, @amadese you can try pass scrollY from your download().

pdf.html(document.getElementById('toPDF'), { filename: 'pdf', html2canvas: { // backgroundColor: '#fdf5e8', scrollY: 0 }, callback: function () { window.open(pdf.output('bloburl')); } });

Thanks now the issue on the top margin is solved.
Nevertheless my content is still not centered in the pdf (bu it is on the html page): the right margin is more big in the pdf than the html file

[kakugiki]

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.28 is the width of A4, which is your pdf page size.

[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 :-)

[kakugiki]

Thank you for getting back to me. @HackbrettXXX I guess this can be closed.

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

[HackbrettXXX]

The jspdf.js file in the src folder is not meant to be used directly. Use the e.g. the dist/jspdf.umd.js file.

[amadese]

The jspdf.js file in the src folder is not meant to be used directly. Use the e.g. the dist/jspdf.umd.js file.

Thanks but now when I'm using directly jspdf.umd.js, I obtained this error :"jsPDF is not defined"

[HackbrettXXX]

ah, we changed the name of the global variable -> const { jsPDF } = window.jspdf.

[amadese]

Hi,

I'm sorry but I'm new with this library. I don't know where I have to do the update in my code :-(

[HackbrettXXX]

Replace

let pdf = new jsPDF('p', 'pt', 'a4');

with

let pdf = new jspdf.jsPDF('p', 'pt', 'a4');

[amadese]

Replace

let pdf = new jsPDF('p', 'pt', 'a4');

with

let pdf = new jspdf.jsPDF('p', 'pt', 'a4');

Thank you so much, it's now working :-).

[amadese]

The jspdf.js file in the src folder is not meant to be used directly. Use the e.g. the dist/jspdf.umd.js file.

Dear @HackbrettXXX , @kakugiki ,

I'm a little lost. In order to be sure to use the complete version of jspdf library (zll features) and for solving this issue, could you tell me please which file I should use for keeping all features of this library and the new updates for solving my problem? What is the difference between dist/jspdf.umd.js and jspdf.js in src ?

If I use dist/jspdf.umd.js I obtain now some other errors (special char issue: #2832) that I didn't have before. when I used jspdf.js.

Thanks for your response and help.

[latharadha]

Hi how can i take the fixed code please. i am in need

[mengheangrat]

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,

It's worked.

[JubairRafi]

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,

It's worked.

it works. But in my case the text gets extra spaces and the font changes. everything is fine but the texts are not. why is that.?

[msdian-hub]

Hello.

Is this issue with the Screen Resolution and Browser size resolved in the updates or not?
For me it is not working :(
That's my code for dowloading the PDF of from HTML.

                     var element = document.getElementById('xyz');
                        var opt = {
                            filename:'myfile.pdf',
                            image:{ type: 'jpeg', quality: 1 },
                            margin: { top: 1, right: 10, bottom: 1, left: 2,},
                            jsPDF:{ unit: 'mm', format: 'letter', orientation: 'portrait' },
                            output: 'abcd.pdf', 
                        };
                            html2pdf(element, opt);
                    
                    }

Any suggestions and discussions will be welcomed.
Thanks in advance.