Using jspdf to save html page as pdf, saved pdf contains incomplete page content if browser is zoomed, Why?

Question

I am using jspdf and html2canvas combination to save html page as pdf. A pdf copy of current page is saved the moment you click a button. The problem is, if you zoom in the page, and then click the button, the saved pdf contains incomplete portion of the current page. Most of the part not visible on page due to zooming, gets cut off in the saved pdf page. What is the solution? Below is the js code being invoked upon click of save button-

var pdf = new jsPDF('l', 'pt', 'a4');
var source = $('#someId')[0];
var options = {
   background  : '#eee'
};

pdf.addHTML(source, options, function(){
pdf.save('abcd.pdf');
});

EDIT

Taking idea from Saurabh's approach, I tried quite a similar thing, but without writing code for any extra div element. Before saving to pdf I made the screen size of a fixed width, and after printing I brought back the width back to default normal. It is working fine for, if it fails, we can always fix the height of the screen too, so that it appears fine in generated pdf despite zooming. Below is the code used by me:-

var pdf = new jsPDF('l', 'pt', 'a4');
var source = $('#someId')[0];
var options = {
   background  : '#eee'
};
var width = source.clientWidth;
source.style.width = '1700px';
pdf.addHTML(source, options,                 
function(){
pdf.save('abcd.pdf');
source.style.width = width+'px';
});

Weihui Guo · Accepted Answer · 2021-02-24 03:06:29Z

11

Here is how I managed to get the full page pdf while the page is zoomed in using jsPDF's new .html() method. First, I force the page zoom level back to 100% before converting it to pdf. It's important to reset the scale in html2canvas option after that, otherwise it'll returns a blank page.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js" 
    integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/"
    crossorigin="anonymous"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<!-- html2canvas 1.0.0-alpha.11 or higher version is needed -->
<script>
    function download() {
        // Bring the page zoom level back to 100%
        const scale = window.innerWidth / window.outerWidth;
        if (scale != 1) {
           document.body.style.zoom = scale;            
        }

        let pdf = new jsPDF('p', 'pt', 'a4');
        pdf.html(document.getElementById('idName'), {
            html2canvas: {
                scale: 1 // default is window.devicePixelRatio
            },
            callback: function () {
                // pdf.save('test.pdf');
                window.open(pdf.output('bloburl')); // to debug
            }
        });
    }
</script>

Update: A better way is to adjust the html2canvas.scale according to the scale factor.

function download() {
    let pWidth = pdf.internal.pageSize.width; // 595.28 is the width of a4
    let srcWidth = document.getElementById('idName').scrollWidth;
    let margin = 18; // narrow margin - 1.27 cm (36);
    let scale = (pWidth - margin * 2) / srcWidth;
    let pdf = new jsPDF('p', 'pt', 'a4');
    pdf.html(document.getElementById('idName'), {
        x: margin,
        y: margin,
        html2canvas: {
            scale: scale,
        },
        callback: function () {
            window.open(pdf.output('bloburl'));
        }
    });
}

edited Feb 24, 2021 at 3:06

answered Feb 24, 2019 at 0:33

Weihui Guo

4,0656 gold badges40 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

shenn Over a year ago

In this example should the two document.getElementById() calls be pointing to the same elem and should the let pdf be declared first in the function? I keep getting "Error: Element is not attached to a Document"

Weihui Guo Over a year ago

@shenn Yeah, it's a typo. It should be the same element.

wildhart Over a year ago

typo: "let srcwidth" needs a capital W, otherwise your "better way" worked great for me!

Saurabh Agrawal · Accepted Answer · 2019-12-16 05:59:03Z

3

+100

I was going through the same problem, To do this what I did is I made a copy of printing div and while clicking print button I attached div copy to my dom with margin-top:500px

After I got its image then I hide this copy of the div, and set margin-top:0px

I hope this will work for you.

edited Dec 16, 2019 at 5:59

answered Jan 25, 2017 at 12:32

Saurabh Agrawal

7,7553 gold badges31 silver badges52 bronze badges

20 Comments

shan Over a year ago

Wha was the logic behind giving top margin? Was your page's upper portion being cut off?

Saurabh Agrawal Over a year ago

give me a sample fiddle with above mentioned issue. I will give you solution in that.

Saurabh Agrawal Over a year ago

by default the second image will have style **diplay:none;margin-top:0px ** ie it will be hidden, when you will click print image button then its change its style to **diplay:block;margin-top:500px ** ie it will be visible to bottom of the page. once you get your canvas now replace back its style to **diplay:none;margin-top:0px ** that will work

shan Over a year ago

I will post a sample fiddle demonstrating the issue, on Monday. Right now unable to do so due to some reasons.

shan Over a year ago

That works as expected in jsfiddle site, but doesn't work in actual code in my IDE. Any idea what could be the difference? I will anyway, accept this answer after some time since the solution is demonstrable and at least it gives some clue.

|

Collectives™ on Stack Overflow

Using jspdf to save html page as pdf, saved pdf contains incomplete page content if browser is zoomed, Why?

EDIT

2 Answers 2

3 Comments

20 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

EDIT

2 Answers 2

3 Comments

20 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related