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

Answer 1

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'));
        }
    });
}

Answer 2

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.