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

【问题标题】：Generating and showing PDF inside NativeScript app在 NativeScript 应用程序中生成和显示 PDF
【发布时间】：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)。

标签： pdf nativescript nativescript-vue

【解决方案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;
    }

}

【讨论】：

太棒了，谢谢！