Question

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

Image of PDF that was generated

我确实发现这个页面（https://coderwall.com/p/nc8hia）似乎表明jsPDF在Cordova中显示图像存在问题（请参阅评论），但作者从未公布过后续内容。有没有人能够使用jsPDF与Cordova并正确添加图像到生成的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创建代码是在这段代码的末尾。所以我注释掉了“返回新的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”);

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

与Cordova的jsPDF - 添加图像

1 个答案: