CODEWITHSUNDEEP
javascriptjspdf
Skathix
Skathix

Reputation: 278

Why is my JsPdf shoving all elements to the left and making their width small?

When I use jsPDF to generate a pdf of my site, all the elements are shoved to the left and as thin as they can be. I've tried setting width in both the pdf.html() options as well as the html2canvas options inside.

    const doc = new jsPDF({
        orientation: "p",
        format: "legal",
        unit: "px",
        hotfixes: ["px_scaling"]
    });

    const elementHandler = {
        '#ignorePDF': function (element) {
            return false;
        }
    }

    const body = document.getElementsByClassName("content")[0];
    
    doc.html(body.parentElement, {
        autoPaging: 'text',
        width: 1000,
        html2canvas: {
            width: 1000,
            windowWidth: 1000
        },
        callback: async function (doc) {
            doc.setLineWidth(1000);
            doc.save("test.pdf")
        },
        elementHandler: elementHandler
    });

This generates a pdf that looks like this:

messed up pdf

Thank you in advance.

Upvotes: 1

Views: 453

Answers (1)

Oleg
Oleg

Reputation: 31

const width = doc.internal.pageSize.getWidth();

doc.html(body.parentElement, {
    autoPaging: 'text',
    width: width,
    windowWidth: width,
    callback: async function (doc) {
        doc.save("test.pdf")
    }
});

Upvotes: 3

Related Questions