jsPDF in Lightning component: get blob in Apex controller

Question

I'm trying to use the library jsPDF on a lightning component. The lighting component handles the creation, and needs to pass it to my apex controller (in order to save the file in Salesforce).

Lightning component

<aura:component controller="calljavascript_cls" >   
<ltng:require scripts="/resource/jsPDF/jspdf.debug.js"
              afterScriptsLoaded="{!c.doInit}"/>
<div id="prinpdf"><h1>Hello world</h1></div>

Lightning controller:

({
doInit : function(component, event, helper) {
    var pdf = new jsPDF();
    pdf.text(20, 20, 'Hello World!');

    var blobPDF = new Blob([pdf.output('bloburi')], {type: 'application/pdf'});
    var blobEncoding = encodeURIComponent(blobPDF);

    console.log('### blob: ', blobPDF);
    console.log('### blob enc: ', encodeMonBlob);

    var action = component.get("c.testVar");
    action.setParams({
        "passBlob" : blobEncoding
    });

    action.setCallback(this, function(a) {
        if (a.getState() === "SUCCESS") {
            console.log('Done');
        } else if (a.getState() === "ERROR") {
            $A.log("Errors", a.getError());
            console.log('bim');
        }
    });

    $A.enqueueAction(action);

}})

Apex controller:

    public class calljavascript_cls {
@AuraEnabled
public static string testVar(String passBlob){
    system.debug('passed original: '+ passBlob);
    String myFile = EncodingUtil.urlDecode(passBlob, 'UTF-8');
    system.debug('passed decoded: '+ myFile);
    String returnme = 'test';
    return returnme;
}}

My issue is that it only passes "[object Blob]" (in the system debug "passed decoded").

I need to get the full blob in my Apex controller, in order to manipulate it as I want, and save the PDF on a record... Any ideas?

Thank you!

Answer 1

So, it seems I got it by myself finally. I just removed the type in the function output, from pdf.output('bloburi') to pdf.output(). Then I encode via encodeURIComponent and simply pass it to my Apex controller.

My Lightning controller finally look like:

    ({
    doInit : function(component, event, helper) {

    var pdf = new jsPDF();
    pdf.text(20, 20, 'Hello World!');

    var getPdfOutput = pdf.output();
    var blobEncoding = encodeURIComponent(getPdfOutput);

        var action = component.get("c.testVar");
        action.setParams({
            "passBlob" : blobEncoding
        });

        action.setCallback(this, function(a) {
            if (a.getState() === "SUCCESS") {
                console.log('Done');
            } else if (a.getState() === "ERROR") {
                $A.log("Errors", a.getError());
                console.log('bim');
            }
        });

        $A.enqueueAction(action);
    }

})

If someone can give details on the why it didn't work initially, that would be very nice!

Answer 2

I have kind of similar requirement , however I need to pass blobEncoding to a diffrent helper method and pass that as parameter to apex controller. What is the attribute type for blob . Any idea @bdglr