Losing content when i convert html to pdf with jsPDF

Question

In my React App (client-side) i have a button to create a pdf using the current html content with jsPDF. I'm using .html() instead of .fromHTML() because i need to keep the html styles in the pdf conversion. The Real Problem is when i use html() i lost a lot of content for the row/col structure of the page. So, i need to scale my html content into the pdf, but i don't know how to do it.

My code:

let doc = new jsPDF('p', 'pt', 'a4')
    let source = document.getElementById('pdfContent')

    doc.html( source, {
        callback: function (doc) {
            doc.save();
        }
     });

Weihui Guo · Accepted Answer · 2020-02-21T03:20:51.350

2

By "lost a lot of content" if you meant your content cannot fit into an a4 page then you can either make your page larger, say using a3 instead of a4, or you may shrink the content by using scale in html2canvas. The scale can be calculated based on your page format and element size.

let doc = new jsPDF('p', 'pt', 'a4')

doc.html(document.getElementById('pdfContent'), {
    html2canvas: {
        scale: [yourScaleHere],
    },
    x: [margin],
    y: [margin],
    callback: function (doc) {
        window.open(doc.output('bloburl'));
    }
});

If you don't need a standard page size, you may just set the page according to your content. e.g. let pdf = new jsPDF('p', 'pt', [612, 1200]);

edited Feb 21 '20 at 03:20

answered Feb 18 '20 at 02:43

Weihui Guo

3,669
5
34
56

It works, but now to content starts in the middle of the page. I read that it could be fixed be downgrade html2canvas version to rc1, but it doesn't work. – Brian Nieto Feb 19 '20 at 15:27
You can try to set the x and y values. Code updated – Weihui Guo Feb 19 '20 at 19:16
Resurrecting and old answer here. "The scale can be calculated based on your page format and element size." do you happen to have an example or formula for doing that? – shenn Sep 14 '20 at 03:09
@shenn https://stackoverflow.com/a/54847643/4271117 – Weihui Guo Sep 14 '20 at 11:53
@WeihuiGuo thanks! I'll reply to you in there, having some issues – shenn Sep 14 '20 at 13:15

Losing content when i convert html to pdf with jsPDF

1 Answers1