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

Posted 2023-04-13

【中文标题】我无法使用 NativeScript 在 jsPDF 中渲染图像

【英文标题】：I can't get images to render within jsPDF using NativeScript

【发布时间】：2019-09-06 01:40:15

【问题描述】：

总结：

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

我正在使用带有以下插件的 NativeScript (VueJS)：

nativescript-share-file jsPDF base-64

我在单击按钮时生成 PDF，在我尝试添加图像之前一切都很好。请参阅 here 以了解这应该是多么容易的示例。

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

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

但是，我错过了一些东西，因为图像根本没有显示出来。

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

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

这是我的方法的内容，包括的cmets和问题：

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 后打开：

【问题讨论】：

你能分享一个可以重现问题的 Playground 示例吗？

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

【参考方案1】：

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

Updated Playground

对于 iOS，您应该使用

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

它是 android 的等价物

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

【讨论】：

谢谢！我知道我确实尝试了问题中提到的 NSData 。我在尝试的时候一定有其他问题。你的例子很有效。谢谢！