在基于 phonegap 的应用程序上使用 jspdf 生成客户端 pdf答案

【问题标题】：Generate client-side pdf with jspdf on phonegap based apps在基于 phonegap 的应用程序上使用 jspdf 生成客户端 pdf
【发布时间】：2013-11-20 12:14:27
【问题描述】：

我尝试从本地数据生成 pdf。

我遇到了 ArrayBuffer() 和 Uint8Array 对象的问题。解决方案是添加我在互联网上找到的 js 实现。

现在这一行出现错误：

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

这是行：

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

我添加了 BlobBuilder.js 和 Blob.js（就像在 jspdf 示例中一样）。

一般来说，jspdf可以做到吗？（我发现jspdf有很多问题）

我该如何解决这个问题？

如何在浏览器、android 和 ios 上生成 pdf..？

感谢您的帮助，祝您有美好的一天:-)

【问题讨论】：

标签： javascript android cordova jspdf

【解决方案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”

【解决方案2】：

Blob 构造函数在 android 中不起作用（不支持所有 Web 浏览器）。快速的解决方案是，使用 Phonegap 文件编写器创建 PDF 文件。以下是对 jsPDF.js 文件的更改：

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
        };

从 CLI 中将 cordova 文件插件添加为 "cordova plugin add org.apache.cordova.file" 到您的项目中。

接下来使用 phonegap filewriter API 实现 write() 函数，如下所示：

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);
 }
}

【讨论】：

您好 Vinod，在实现您的代码后，我现在只能下载文件，但 size=0。我是不是错过了什么。等待您的回复。