html2pdf.js icon indicating copy to clipboard operation
html2pdf.js copied to clipboard

Success generate but got another blank page

Open xinyun-onesoftlab opened this issue 1 year ago • 3 comments

js: generatePDF(invoice_no) { var element = document.getElementById("export"); var opt = { margin: 0, filename: ${invoice_no}.pdf, image: { type: "jpg", quality: 0.98 }, html2canvas: {scale:2}, jsPDF: { unit: "cm",format:[21,29.7], orientation: "portrait" } }; html2pdf().set(opt).from(element).toCanvas().save() }, Screenshot from 2023-08-11 14-27-32

xinyun-onesoftlab avatar Aug 11 '23 06:08 xinyun-onesoftlab

Is the entire pdf made of blank pages? How long is the document?

davidnbooth avatar Aug 16 '23 03:08 davidnbooth

filename should look like this i guess: ${invoice_no} + '.pdf'

Moziezez avatar Oct 08 '23 22:10 Moziezez

@Moziezez The OP was using a template string with backtick ` characters in the code, which is fine and will work well, but github uses those to let you format text as a "code" section, so it took those characters out and applied the formatting to that section, which is why it looks strange in the post. For future reference, @xinyun-onesoftlab, you can use triple backticks ``` to make a code block like this:

generatePDF(invoice_no) {
    var element = document.getElementById("export");
    var opt = {
        margin: 0,
        filename: `${invoice_no}.pdf`,
        image: { type: "jpg", quality: 0.98 },
        html2canvas: {scale:2},
        jsPDF: { unit: "cm", format: [21, 29.7], orientation: "portrait" }
    };
    html2pdf().set(opt).from(element).toCanvas().save();
}

By the way I was asking about document length because there is a known issue where long documents are rendered entirely blank. The html3pdf solution mentioned there may resolve this issue.

davidnbooth avatar Oct 12 '23 16:10 davidnbooth