javascript - 我无法使用 NativeScript 在 jsPDF 中渲染图像

Question

总结:

Playground :https://play.nativescript.org/?template=play-vue&id=pntfZD&v=4

我正在使用 NativeScript (VueJS) 和以下插件:

1. > nativescript-share-file
2. > jsPDF
3. > base-64

我正在通过单击按钮生成 PDF，一切都很好，直到我尝试添加图像。参见 here举个例子来说明这应该是多么容易。

如果我使用我的示例图像，它只是一个黑色正方形，并且使用 this great resource 对它进行 base64encode并将输出放入上述链接 here它工作正常。

在开始我的代码之前，我还想补充一点，我是 console.log(...) 我的编码字符串，并将其粘贴到上述网站中，它工作正常。

但是，我遗漏了一些东西，因为图像根本没有显示。

这是让我开始这次冒险的原因:https://medium.com/@kumarandena/pdf-generation-in-nativescript-using-javascript-libraries-864ecf4e9a3a

我还将在我的代码中包含一些评论，这些评论代表指导和进一步的问题。

以下是我的方法、评论和问题的内容:

const image = new imageSourceModule.ImageSource();
image.fromFile("~/images/test.jpg").then(function(src) {
// The "reallylong==" base64 value below is what I validated as working
// on that demo site and even hard coded it to be sure

var imgData = "data:image/jpeg;base64,/reallylong==";
var doc = new jsPDF();
doc.setFontSize(40);
doc.text(35, 25, "Hello, world!");

// Here is my function that I hope to ultimately work
//doc.addImage("data:image/jpeg;base64," + image.toBase64String("jpg"), 'JPEG', 15, 40, 500, 500);                      

// Here is the hard coded one from above
doc.addImage(imgData, "JPEG", 15, 40, 180, 160);

// This gets me the raw data that I'm going to save to file
var datauristring = doc.output("datauristring").split(",")[1];

const documents = fs.knownFolders.documents();
const folder = documents.getFolder("testFolder");
const file = folder.getFile("testFile.pdf");
const data = base64.decode(datauristring);

// For this data, I have tried various methods of encoding, decoding
// using NSString, NSFile I think. I'm posting my question with the code in its current state.

file.writeText(data)
  .then(result => {
    console.log("result", result);
    // result is always undefined but the PDF does save with text

    // I'm not sure why this is needed, but it fails otherwise.
    // More specifically, the share file dialogue opens but fails if I for example try to save the file somewhere. App doesn't crash, but iOS rejects it
    // I would expect the promise to resolve and a timeout not needed
    setTimeout(function() {
        var shareFile = new ShareFile();
            shareFile.open({
                path: fs.path.join(documents.path + "/testFolder", "testFile.pdf"),
                intentTitle: "Open text file with:",
                rect: {
                    x: 110,
                    y: 110,
                    width: 0,
                    height: 0
                },
                options: false,
                animated: true
            });
        }, 2000);
    }).catch(err => {
         // This is never reached
         console.log(err);
    });
});

最后，我的测试输出从手机发送到我的 MAC 后打开:

Answer 1

您正在将文件写为纯文本，您应该像博文中那样将其写为二进制数据。使用 native 解码方法并使用 writeSync 方法将文件写入二进制文件会按预期显示图像。

Updated Playground

对于 iOS，你应该使用

let data = NSData.alloc().initWithBase64EncodedStringOptions(datauristring, 0);

它是 Android 的等价物

let data = android.util.Base64.decode(datauristring, android.util.Base64.DEFAULT);