Generate client-side pdf with jspdf on phonegap based apps

问题

i try to generate a pdf from local datas.

I had problems with the ArrayBuffer() and the Uint8Array objects. The solution was to add a js implemention i found in the internet.

Now there is a error on this line:

E/Web Console(21515): Uncaught TypeError: Illegal constructor at file:///android_asset/www/libs/jspdf.js:973

This is the line:

blob = new Blob([array], {type: "application/pdf"});

I added BlobBuilder.js and Blob.js (like in the jspdf example).

In general, is it possible to to that with jspdf? (i found a lot of problems with jspdf)

How can i solve this problem?

What can i do to generate pdfs on browser, android and ios..?

Thanks for help and have a nice day :-)

回答1:

try  
{
    blob = new Blob([data], {type: "application/pdf"});
    console.debug("case 1");
}
catch (e)  
{
    window.BlobBuilder = window.BlobBuilder ||
                   window.WebKitBlobBuilder ||
                      window.MozBlobBuilder ||
                      window.MSBlobBuilder;
    if (e.name == 'TypeError' && window.BlobBuilder)  
    {
        var bb = new BlobBuilder();
        bb.append(data);
        blob = bb.getBlob("application/pdf");
        console.debug("case 2");
    }
    else if (e.name == "InvalidStateError")  
    {
         // InvalidStateError (tested on FF13 WinXP)
         blob = new Blob([array], {type: "application/pdf"});
         console.debug("case 3");
    }
    else  
    {
        // We're screwed, blob constructor unsupported entirely   
        console.debug("Errore");
    }
}

回答2:

Blob constructor doesn't work in android (no support for all the web browsers). The quick solution is, use Phonegap filewriter to create PDF file. Below is the changes to jsPDF.js file:

output = function (type, options) {
            var undef, data, length, array, i, blob;
            switch (type) {
            case undef:
                return buildDocument();
            case 'save':
                if (navigator.getUserMedia) {
                    if (window.URL === undefined) {
                        return API.output('dataurlnewwindow');
                    } else if (window.URL.createObjectURL === undefined) {
                        return API.output('dataurlnewwindow');
                    }
                }
                data = buildDocument();
                write(data, options);                    
                break;
            case 'datauristring':
            case 'dataurlstring':
                return 'data:application/pdf;base64,' + btoa(buildDocument());
            case 'datauri':
            case 'dataurl':
                document.location.href = 'data:application/pdf;base64,' + btoa(buildDocument());
                break;
            case 'dataurlnewwindow':
                window.open('data:application/pdf;base64,' + btoa(buildDocument()));
                break;
            default:
                throw new Error('Output type "' + type + '" is not supported.');
            }
            // @TODO: Add different output options
        };

Add cordova file plugin from CLI as "cordova plugin add org.apache.cordova.file" to your project.

Next implement write() function using phonegap filewriter API like below:

write = function (data, filename) {
    var PERSISTENT = window.PERSISTENT || LocalFileSystem.PERSISTENT;

window.requestFileSystem(PERSISTENT, 0, gotFS, fail);

function gotFS(fileSystem) {
    fileSystem.root.getFile(filename, {create: true, exclusive: false}, gotFileEntry, fail);
}

function gotFileEntry(fileEntry) {
    fileEntry.createWriter(gotFileWriter, fail);
}

function gotFileWriter(writer) {
    writer.write(data);
}

function fail(error) {
    console.log(error.code);
 }
}

来源：https://stackoverflow.com/questions/18596005/generate-client-side-pdf-with-jspdf-on-phonegap-based-apps

标签

javascript

android

cordova

jspdf