Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jsPDF get the generated document as base64

Tags:

jspdf

I´m trying to generate a PDF on my application, using something like this, from documentation:

var doc = new jsPDF();   

doc.html(document.body, {
   callback: function (doc) {
     doc.save();
   }
});

But what I need is to get this generated file, as a base64 content, to send as an attachment on an email. Is there a way to get this directly on callback?

like image 501
Celso Marigo Jr Avatar asked Oct 17 '25 19:10

Celso Marigo Jr


2 Answers

It's worth noting that the datauri option changes the document location, see the following snippet from jsPDF lib:

case 'datauri':
case 'dataurl':
    return global.document.location.href = datauri;

This is fine unless you are trying to use an IFrame, as it would cause its body to be replaced by an embed tag displaying the pdf just generated.

Instead, the safest option is to use datauristring as this simply returns the pdf in a base64 string:

var pdf = new jsPDF('p', 'pt', 'a4');

var base = pdf.output('datauristring'); // base64 string

console.log("base64 is ", base);

Honestly, I don't know why anybody would want to use the datauri option instead of datauristring as latter's behaviour it's what most people expect anyway.

like image 53
Elias Faraone Avatar answered Oct 19 '25 11:10

Elias Faraone


You can do like below.

 var pdf = new jsPDF('p', 'pt', 'a4');

 pdf.html(document.getElementById('doc'), {
    callback: function (pdf) {

    // example text
    pdf.text(20, 20, 'Hello world!');
    pdf.text(20, 30, 'This is client-side Javascript, pumping out a PDF.');

    var base = pdf.output('datauri'); // directly to base664

    console.log("base64 is  ");
    console.log(base);

    // you can generate in another format also  like blob
     var out = pdf.output('blob');
    var reader = new FileReader();

    reader.readAsDataURL(out); 
    reader.onloadend = function() { // for blob to base64
         base64data = reader.result; 
         console.log("base64 data is ");               
         console.log(base64data );
    }
    pdf.save('DOC.pdf');

    }
    })

You can see more on output() method in the following link.

jspdf output() source code

like image 33
PALLAMOLLA SAI Avatar answered Oct 19 '25 11:10

PALLAMOLLA SAI



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!