CODEWITHSUNDEEP
javascripthtmlreactjspdfjspdf
Brian Nieto
Brian Nieto

Reputation: 283

Losing content when i convert html to pdf with jsPDF

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

Upvotes: 0

Views: 4876

Answers (1)

Weihui Guo
Weihui Guo

Reputation: 3997

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]);

Upvotes: 3

Related Questions