Using jsPDF-html2canvas, can I use jsPDFs .output('datauri')?

28 Views Asked by At

Is there a way to use other outputs than .save() with jsPDF-html2canvas Working directly with html2canvas & jsPDF, it is possible to use pdf.output('datauri') which I can then send with fetch to my API to use the generated file as an email attachement. When using this with jsPDF-html2canvas I see in the verbose console that the file gets created, but when using pdf.output('datauri') to send it to the api the page 'about:blank#blocked' gets opened.

my code:

const savePdf = async () => {
    setSendingEmail(true)
    const pages= document.getElementsByClassName('page')
    const pdf = await html2PDF(pages , {
            jsPDF : {
                format: 'a4',
            } ,
            margin: {
                top: 5,
                right: 5,
                bottom: 5,
                left: 5,
            },
            watermark({ pdf, pageNumber, totalPageNumber }) {
                // pdf: jsPDF instance
                pdf.setTextColor('#000');
                pdf.text(50, pdf.internal.pageSize.height - 30, `companyname.com - ${format(new Date(), 'dd/MM/yyyy')} - ${pageNumber}/${totalPageNumber}`);
            } ,
            autoResize : true ,
            imageType: 'image/png',
            output: 'offerte.pdf',
            init: function() {},
            success: function(pdf) {
                pdf.save(this.output)
            }
    })
    console.log(pdf.output('datauri'))
    setSendingEmail(false)
}

When all is rendered, pdf.save() gives me the correct file, but then gives me the blank page on pdf.output().

1

There are 1 best solutions below

0
lennert_h On

Using pdf.output('blob') if works like a charm. Apparently 'datauri' is no longer in use.

Note to self: RTFM (also from the libraries used in a package) jsPDF.html#output