使用 jsPDF 将 html 转换为 pdf 时丢失内容

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

Answer 1

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. eg let pdf = new jsPDF('p', 'pt', [612, 1200]);