android – jsPDF与Cordova – 添加图像

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

我确实发现这个页面(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);
    });
}

解决方法:

我在这个博客文章的帮助下解决了这个问题：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”);

它起作用了.
我希望这篇文章能够帮助其他人遇到同样的问题.

android – jsPDF与Cordova – 添加图像

相关推荐