Html2canvas / jspdf cut off image

Question

I want to make a pdf of an element in my project, but the image keeps getting cut off at the right. I use jspdf and html2canvas

This is what I want

And this is what I get in my pdf:

As you can see, the image doesn't fit the right width.

I have tried the following:

Html2Canvas image is getting cut https://tutel.me/c/programming/questions/44796908/jspdf+html2canvas++html++images+cut+off+capture https://www.reddit.com/r/learnjavascript/comments/cnn7q4/anyone_experience_with_jspdf_my_image_is_cut_off/ html2canvas offscreen

But none of these work.

This is my code:

const offerteId = $(e).data("id"),
              card = document.querySelector('.body-pdf-' + offerteId + ''),
              filename  = offerteId + '.pdf';

        html2canvas(card).then(function(canvas) {
            const img = canvas.toDataURL("image/png"),

            pdf = new jsPDF({
                orientation: 'p',
                unit: 'mm',
                format: 'a4',
            });

            // Optional - set properties on the document
            pdf.setProperties({
                title: offerteId.toString(),
                subject: 'Offerte: ' + offerteId.toString(),
            });

            const imgProps = pdf.getImageProperties(img);
            const pdfWidth = pdf.internal.pageSize.getWidth();
            const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;

            pdf.addImage(img, 'JPEG', 0, 0, pdfWidth, pdfHeight);
            pdf.save(filename);
        });

Hopefully someone can help

score 3 · Answer 1 · answered May 23 '21 at 12:18

3

When html2canvas renders the image, it limits the capture to the visible area of the screen. Then, the only thing that worked for me, was to add the following code into my css.

.html2canvas-container { 
    width: 3000px; 
    height: 3000px; 
}

This style code is used to prevent html2canvas limit the rendering to the viewable area.

answered May 23 '21 at 12:18

Grégori Fernandes de Lima

1,226
11
13

Fernandes de Lima : Your solution worked for me! Thanks! As I'm using Bootstrap, I've also replaced the class `container` for `container-fluid` in all the divs that were cutting off. – ArtFranco Jun 14 '21 at 22:02

score 2 · Accepted Answer · answered Jan 07 '21 at 15:35

2

I have been having a similar issues today. The way I got round it was because of a question you asked on the official github: https://github.com/eKoopmans/html2pdf.js/issues/39.

By setting the width of html & body tags to 794px BEFORE rendering the page to PDF, the page fits the width nicely. It is working for me so that's good enough for me although it might not be the right answer.

answered Jan 07 '21 at 15:35

Colin Wiseman

848
6
10

1

Ah nice I see! I don't use jspdf and html2canvas anymore.. I use TCPDF now because that works the best for me. But i'll mark your answer as right answer because maybe this will help other people with the same issue. – Mark_ Mar 02 '21 at 13:12

score 1 · Answer 3 · edited Apr 22 '20 at 15:20

1

Everytime html2canvas changes width and height of your element, in your case, change the 'card' element.

You should use scale: 1, and html2Canvas will be with the width and height that you set on the first place.

const options = { scale: 1 }
html2canvas(card, options).then(function(canvas) { /*your code*/ }

edited Apr 22 '20 at 15:20

David Buck

3,752
35
31
35

answered Apr 22 '20 at 15:00

Jean Medes Dinelli

11
1

Diego Rojas · Answer 4 · 2022-02-22T11:53:00.630

I had the same issue, and i solve it by setting up the window width to my main page container and then to the html2canvas width, with the same value.

function exportPDF(div, fileName) {
    const invoice = this.document.getElementById(div == null ? "generalDiv" : div);
    invoice.style.width =  $(window).width()+"px";
    var opt = {
        margin: 1,
        filename: fileName+'.pdf',
        image: { type: 'jpeg', quality: 0.98 },
        html2canvas: { scale: 1, width: $(window).width()},
        jsPDF: { unit: 'in', format: 'a0', orientation: 'portrait' }
    };
    html2pdf().from(invoice).set(opt).save();
}

Html2canvas / jspdf cut off image

4 Answers4