带有 Cordova 的 jsPDF - 添加图像

Question

我正在尝试使用移动 Cordova 应用程序中的 jsPDF 库 ( https://github.com/MrRio/jsPDF )生成 PDF 。我目前正在 Android 4.0.4 设备上测试该应用程序，但它也需要在 Windows mobile 8 上运行。 PDF 文档中的文本显示正确，但任何图像都被打乱了。见下图

我确实发现这个页面（https://coderwall.com/p/nc8hia）似乎表明 jsPDF 在 Cordova 中显示图像存在问题（见评论），但作者从未发布后续内容。有没有人能够在 Cordova 中使用 jsPDF 并将图像正确添加到生成的 PDF 中？我的代码如下，任何帮助或建议将不胜感激。

function demoReceipt() {
    var img = new Image();

    img.onError = function() {
        alert('Cannot load image: "' + url + '"');
    };
    img.onload = function() {
        createPdf2(img);
    };
    img.src = 'img/testlogo.png';
}



function createPdf2(myLogo) {
    //  var doc = new jsPDF('p', 'pt', 'jontype');

    var doc = new jsPDF('p', 'pt', 'letter');

    doc.setProperties({
        title : 'Fueling Receipt',
        author : 'Jon Hoffman',
        creater : 'Jon Hoffman'
    });

    doc.addImage(myLogo, 'PNG', 5, 5, 140, 30);
    doc.setFontSize(12);
    doc.text(10, 40, 'Sample PDF receipt');
    doc.setFontSize(8);
    doc.text(10, 45, 'Smaller text - new');

    var pdfOutput = doc.output();

    //NEXT SAVE IT TO THE DEVICE'S LOCAL FILE SYSTEM
    //Requires  cordova plugin add org.apache.cordova.file
    console.log("file system...");
    window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fileSystem) {

        console.log(fileSystem.name);
        console.log(fileSystem.root.name);
        console.log(fileSystem.root.fullPath);

        fileSystem.root.getDirectory("myPDFs", {
            create : true,
            exclusive : false
        }, function(dir) {

            fileSystem.root.getFile("myPDFs/test.pdf", {
                create : true
            }, function(entry) {
                var fileEntry = entry;
                console.log(entry);

                entry.createWriter(function(writer) {
                    writer.onwrite = function(evt) {
                        console.log("write success");
                    };

                    console.log("writing to file");
                    writer.write(pdfOutput);
                }, function(error) {
                    console.log(error);
                });

            }, function(error) {
                console.log(error);
            });
        }, function(error) {
        });
    }, function(event) {
        console.log(evt.target.error.code);
    });
}

Answer 1

我在这篇博文的帮助下解决了这个问题：https : //coderwall.com/p/nc8hia。该帖子中使用的 0.90 版本与我从https://github.com/MrRio/jsPDF使用的版本之间似乎存在显着差异，但解决方案几乎相同。首先，在 MyRio 的版本中，您可以在不修复 Igor 帖子中提到的 Blob 问题的情况下生成 PDF。您所需要的只是通过调用“doc.ouput()”生成 PDF 输出，然后使用 Cordova 文件系统插件保存它。所以我认为我不必创建 Blob（这是我错的地方）。
Igor（来自 coderwall 帖子）用一些额外的代码回答了我的问题，但是当我从 MyRio 版本搜索 jspdf.js 文件时，我看到代码（更紧凑的版本）已经在第 734 – 738 行的代码中：

var data = buildDocument(), len = data.length,
    ab = new ArrayBuffer(len), u8 = new Uint8Array(ab);

while(len--) u8[len] = data.charCodeAt(len);
return new Blob([ab], { type : "application/pdf" });

但我也注意到 Igor 在他最初的帖子中修复的 blob 创建代码在这个代码块的末尾。所以我注释掉了“return new Blob([ab], { type : “application/pdf”});” 行并在 Igor 的帖子中输入以下代码，并更改较小的变量名称：

try
{
    var blob = new Blob([ab], {type: "application/pdf"});
    console.debug("case 1");
    return blob;
 }
 catch (e)
 {
     window.BlobBuilder = window.BlobBuilder ||
                                          window.WebKitBlobBuilder ||
                                          window.MozBlobBuilder ||
                                          window.MSBlobBuilder;
     if (e.name == 'TypeError' && window.BlobBuilder)
     {
         var bb = new BlobBuilder();
         bb.append(ab);
         console.debug("case 2");
         return bb.getBlob("application/pdf");

      }
      else if (e.name == "InvalidStateError")
      {
          // InvalidStateError (tested on FF13 WinXP)
          console.debug("case 3");
          return new Blob([ab], {type: "application/pdf"});

       }
       else
       {
           // We're screwed, blob constructor unsupported entirely
           console.debug("Errore");
       }
 }

然后当我生成那个 pdfOutput 时，在我的代码中，我改变了

var pdfOutput = doc.output();

到

var pdfOutput = doc.output(“blob”);

它奏效了。我希望这篇文章能够帮助遇到同样问题的其他人。