在 NativeScript 应用程序中生成和显示 PDF

Posted 2023-04-14

【中文标题】在 NativeScript 应用程序中生成和显示 PDF

【英文标题】：Generating and showing PDF inside NativeScript app

【发布时间】：2020-04-14 17:24:16

【问题描述】：

我想在 NativeScript-Vue 应用程序中显示使用 pdfMake 和 nativescript-pdf-view 插件生成的 PDF 文件。

我无法在插件小部件中显示文件。我从this example开始，但我想在应用内显示文件。

首先我生成将 PDF 编码为 base64，它工作正常，然后我将编码的字符串写入文件。当我将文件路径传递给小部件时，没有任何显示。 URL 显示正确，因此在写入文件或处理路径时可能会发生错误。

---

PDF 生成（app/scripts/pdf.js）：

import  createPdf  from "pdfmake/build/pdfmake";
import  pdfMake  from "pdfmake/build/vfs_fonts";
import  knownFolders  from "tns-core-modules/file-system";

export default 
    generatePdf() 
        return new Promise((resolve, reject) => 

            var docDefinition = 
                pageSize: "A5",
                pageMargins: [40, 40, 40, 40],
                content:  text: "Test", fontSize: 80 
            ;

            var file = knownFolders.documents().getFile("document1.pdf");

            createPdf(docDefinition, "", "", pdfMake.vfs).getBase64(base64 => 
                // decoding this string returns a correct pdf file

                file.writeText(base64).then(() => 
                    // file properties are updated

                    resolve(file.path);
                    // path example: "/data/user/0/app package/files/document1.pdf"

                ).catch(e => reject(e));
            );
        );
    ,

    // other code

组件：

<template>
    <GridLayout rows="* *">
        <Button row="0" @tap="getPDF" text="get pdf" />
        <PDFView row="1" :src="pdf" />
    </GridLayout>
</template>

<script>
import pdfModule from "../scripts/pdf";

export default 
    data() 
        pdf: ""
    ,
    methods: 
        async getPDF() 
            this.pdf = await pdfModule.generatePdf().catch(e => console.error(e));
        
    

</script>

【问题讨论】：

您不应该将 base64 字符串写入文件。如果要将数据写入文件，它应该是二进制的，通常浏览器/webview 使用 base64 字符串。它是二进制文件的替代品。

好的，我看到 writeText 不接受 base64 字符串。现在我正在尝试使用writeSync 编写一个 Uint8Array，但在java.io.FileOutputStream 上出现错误

我能够使用原生字节数组在 android 上实现这一点。现在我需要一个代码 sn-p 用于将字节数组转换为 ios NSData。

你可以使用语法NSData.dataWithBytesLength(bytePointer, length)。

【参考方案1】：

使用本机字节数组解决。

import  createPdf  from "pdfmake/build/pdfmake";
import  pdfMake  from "pdfmake/build/vfs_fonts";
import  knownFolders  from "tns-core-modules/file-system";
import  isAndroid  from "tns-core-modules/platform";

export default 

    generatePdf() 
        return new Promise((resolve, reject) => 

            let docDefinition = 
                pageSize: "A5",
                pageMargins: [40, 40, 40, 40],
                content:  text: "Test", fontSize: 80 
            ;

            let file = knownFolders.documents().getFile("document1.pdf");

            createPdf(docDefinition, "", "", pdfMake.vfs).getBuffer(result => 

                file.writeSync(this._bufferToNativeArray(result), e => 
                    console.error(e);
                    reject(e);
                );

                resolve(file.path);
            );
        );
    ,

    _bufferToNativeArray(byteArray) 
        let array;

        if (isAndroid) 
            array = Array.create("byte", byteArray.byteLength);
            for (let i = 0; i < byteArray.length; i++) 
                array[i] = new java.lang.Byte(byteArray[i]);
            
         else 
            array = NSData.dataWithBytesLength(byteArray, byteArray.byteLength);
        

        return array;
    

   

【讨论】：

太棒了，谢谢！