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

amadese · 2020-06-11T06:30:23Z

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.

The text was updated successfully, but these errors were encountered:

pratik-agarwal · 2020-06-12T01:00:00Z

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

HackbrettXXX · 2020-06-25T13:25:26Z

Seems related to #2781

amadese · 2020-07-09T07:04:38Z

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 · 2020-07-09T10:28:15Z

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

kakugiki · 2020-07-16T02:24:11Z

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

amadese · 2020-07-21T06:38:56Z

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 · 2020-07-21T07:48:35Z

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 [email protected] I get this file:
html.pdf

kakugiki · 2020-07-22T02:27:59Z

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 · 2020-07-22T08:00:45Z

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 · 2020-07-22T11:35:07Z

@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 · 2020-07-22T14:01:40Z

@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

Fix issue parallax#2766 margin-top issue with zoom-in'ed page

kakugiki · 2020-07-22T14:43:39Z

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 · 2020-07-23T06:51:44Z

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 · 2020-07-23T19:55:12Z

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

amadese · 2020-07-31T07:27:50Z

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 · 2020-07-31T08:32:13Z

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 · 2020-07-31T09:01:07Z

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 · 2020-07-31T09:02:57Z

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

amadese · 2020-07-31T09:22:24Z

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 · 2020-07-31T10:30:36Z

Replace

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

with

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

amadese · 2020-08-03T06:47:32Z

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 · 2020-08-05T09:47:43Z

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 · 2021-02-17T14:21:20Z

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

mengheangrat · 2021-02-26T09:43:34Z

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.

JubairRafi · 2021-06-09T08:29:55Z

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.

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 · 2023-02-16T09:16:26Z

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.

HackbrettXXX added the Bug label Jun 15, 2020

kakugiki mentioned this issue Jul 5, 2020

fixed issue #2632 #2665

Merged

kakugiki added a commit to kakugiki/jsPDF that referenced this issue Jul 22, 2020

Update html.js

1d2cb9e

Fix issue parallax#2766 margin-top issue with zoom-in'ed page

kakugiki mentioned this issue Jul 22, 2020

Update html.js #2817

Merged

HackbrettXXX closed this as completed Jul 24, 2020

kakugiki mentioned this issue Jul 24, 2020

.html() function bug #2745

Closed

amadese mentioned this issue Aug 4, 2020

Special char not recognized and text illegible in a PDF generated with jspdf and html2canvas #2832

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

amadese commented Jun 11, 2020

pratik-agarwal commented Jun 12, 2020

HackbrettXXX commented Jun 25, 2020

amadese commented Jul 9, 2020 •

edited

Loading

HackbrettXXX commented Jul 9, 2020

kakugiki commented Jul 16, 2020 •

edited

Loading

amadese commented Jul 21, 2020 •

edited

Loading

HackbrettXXX commented Jul 21, 2020

kakugiki commented Jul 22, 2020 •

edited

Loading

HackbrettXXX commented Jul 22, 2020

kakugiki commented Jul 22, 2020

amadese commented Jul 22, 2020

kakugiki commented Jul 22, 2020 •

edited

Loading

amadese commented Jul 23, 2020

kakugiki commented Jul 23, 2020

amadese commented Jul 31, 2020

HackbrettXXX commented Jul 31, 2020

amadese commented Jul 31, 2020

HackbrettXXX commented Jul 31, 2020

amadese commented Jul 31, 2020

HackbrettXXX commented Jul 31, 2020

amadese commented Aug 3, 2020 •

edited

Loading

amadese commented Aug 5, 2020 •

edited

Loading

latharadha commented Feb 17, 2021

mengheangrat commented Feb 26, 2021

JubairRafi commented Jun 9, 2021

msdian-hub commented Feb 16, 2023

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

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

Comments

amadese commented Jun 11, 2020

pratik-agarwal commented Jun 12, 2020

HackbrettXXX commented Jun 25, 2020

amadese commented Jul 9, 2020 • edited Loading

HackbrettXXX commented Jul 9, 2020

kakugiki commented Jul 16, 2020 • edited Loading

amadese commented Jul 21, 2020 • edited Loading

HackbrettXXX commented Jul 21, 2020

kakugiki commented Jul 22, 2020 • edited Loading

HackbrettXXX commented Jul 22, 2020

kakugiki commented Jul 22, 2020

amadese commented Jul 22, 2020

kakugiki commented Jul 22, 2020 • edited Loading

amadese commented Jul 23, 2020

kakugiki commented Jul 23, 2020

amadese commented Jul 31, 2020

HackbrettXXX commented Jul 31, 2020

amadese commented Jul 31, 2020

HackbrettXXX commented Jul 31, 2020

amadese commented Jul 31, 2020

HackbrettXXX commented Jul 31, 2020

amadese commented Aug 3, 2020 • edited Loading

amadese commented Aug 5, 2020 • edited Loading

latharadha commented Feb 17, 2021

mengheangrat commented Feb 26, 2021

JubairRafi commented Jun 9, 2021

msdian-hub commented Feb 16, 2023

amadese commented Jul 9, 2020 •

edited

Loading

kakugiki commented Jul 16, 2020 •

edited

Loading

amadese commented Jul 21, 2020 •

edited

Loading

kakugiki commented Jul 22, 2020 •

edited

Loading

kakugiki commented Jul 22, 2020 •

edited

Loading

amadese commented Aug 3, 2020 •

edited

Loading

amadese commented Aug 5, 2020 •

edited

Loading