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

Question

总结：

游乐场：https://play.nativescript.org/?template=play-vue&id=pntfZD&v=4

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

我正在单击按钮生成 PDF，在我尝试添加图像之前一切正常。请参阅 here 示例，了解这应该有多简单。

如果我使用我的示例图像，它只是一个黑色方块，base64encode 使用这个很棒的资源并将输出放入上述 link 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);
    });
});

最后，我的测试输出在从 phone 发送到我的 MAC 后打开：

Answer 1

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

Updated Playground

对于iOS，你应该使用

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

它是 Android 相当于

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

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

I can't get images to render within jsPDF using NativeScript

javascript

ios

jspdf

nativescript

nativescript-vue