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

Question

摘要：

游乐场：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 console.log(...)将其放到上述链接here中，它将正常工作。

在获得代码之前，我还想补充一下，我是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); }); }); 我的编码字符串，并将其粘贴到上述站点中，效果很好。

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

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

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

这是我的方法，评论和问题的内容：

kinit ABC@XXXX.ORG -k -t xyz.keytab

最后，我的测试输出通过电话

发送到我的MAC后打开。

Answer 1

您正在将文件写为纯文本，假设像博客文章一样将其写为二进制数据。使用本机解码方法，并使用writeSync方法将文件写入二进制文件即可显示图像。

documentation

对于iOS，您应该使用

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

相当于

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