Html2Canvas image is getting cut

html jspdf html2canvas
user3442470 picture user3442470 · Oct 31, 2016 · Viewed 7.8k times · Source

I use Html2Canvas and then jsPdf to export the image.

This is the function:

function exportPdf() {
    content = $("#print");

    var useWidth = content.prop('scrollWidth');
    var useHeight = content.prop('scrollHeight');

    debugger;

    html2canvas((content), { width: useWidth, height: useHeight}).then(function (canvas) {
        debugger;
        var img = canvas.toDataURL("image/png");
        var doc = new jsPDF({
            unit:'px', 
            format:'a4'
        });

        debugger;
        doc.addImage(img, 'JPEG', 0, 0);
        doc.save('test.pdf');
    });
}

I think is taking in consideration the viewport, is like doing a printscreen, of course whatever is below the scroll it doesn't take it into consideration.

Any ideas?

Answer

Olubodun Agbalaya picture Olubodun Agbalaya · Sep 20, 2017

Call

    window.scrollTo(0,0)

Before calling html2canvas, its seems its a bug but the window needs to be at the top for html2canvas to capture the entire DOM passed to it

Related questions

HTML2canvas generates Blurry images

I am using jsPDF and it uses html2canvas to generate an image from some html element and insert on the .pdf file. But there is a problem on html2canvas, it generates blurry images from the html. See example …

Read More
How to Remove black bg from pdf(jspdf)?

I have converting from html to pdf by using html2canvas and jspdf. I am using a3 format pdf but content width ix 1000px. so after 1000px, pdf shows black background. canvas{ background: #fff !important; background-color: #fff !important margin: 0; } #cisForm { …

Read More
How to properly use jsPDF library

I want to convert some of my divs into PDF and I've tried jsPDF library but with no success. It seems I can't understand what I need to import to make the library work. I've been through the examples and …

Read More