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

Question

我想在 NativeScript-Vue 应用程序中显示使用带有 nativescript-pdf-view 插件的 pdfMake 生成的 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>

Answer 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;
    }

}

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

Generating and showing PDF inside NativeScript app

pdf

nativescript

nativescript-vue