Preview/Read a .pdf file inside Nativescript application


#1

Hey Everyone!

Possible Ways to provide the preview/read option for .pdf files inside the Nativescript applications :face_with_monocle:

Looking ways for NS flavors :

  • NativeScript Core applications

  • NativeScript with Angular applications

Looking Possible Ways :

  • Load file from FileSystem/external storage

  • Load file from URL

  • Load file from device’s local database

Suggest your ideas here!

Cheers!


Show pdf in view
How to view .pdf file inside a folder in app using file system
#2

Take a look at this plugin for viewing PDFs: https://github.com/Merott/nativescript-pdf-view


#3

Thanks @roblauer, I have implemented the nativescript-pdf-view plugin with my project by this morning.

Here i have shared some code, It may help someone!

Nativescript with Angular

Preview from Local storage using FileSystem

Here I am having one separate modal page for managing all previews.

Preview.html

    <StackLayout *ngIf="pdfpreview" rows="auto, *, auto, auto, auto">
        <Label width="50%" row="0" text="Report Type : Certs" color="black"></Label>
        <FlexboxLayout height="85%" row="1" flexDirection="column">
            <pdf:PDFView flexGrow="1" src="{{ pdfpath }}"></pdf:PDFView>
        </FlexboxLayout>
        <Label row="2" text="Comments" color="black"></Label>
        <TextView row="3" editable="false"></TextView>
        <Button row="4" width="30%" class="btn btn-primary btn-rounded-sm" text="Close" (tap)="submit()"></Button>
    </StackLayout>

Preview.ts

       case "pdf":
                // fetch filename from controller using app settings
                filename = this.attachedfilename;

                var afile: File;
                var afolder: Folder;
                var afoldername: string;
                var afilename: string;

                //fetch path
                afoldername = fs.path.join(documents.path, "Pdf Details", filename);
                console.log("pdf folder path : " + afoldername);

                //set the pdf
                this.pdfpath = afoldername;

                //set the scope
                this.pdfpreview = true;
                break;

#4

Hi! I saw this topic and it seems quite interesting, though I’m using Vanilla JS

how does preview.ts convert to js?

Thanks!


#5

Apart (perhaps) from the this, that code is just plain js. Oh, and you probably have to remove the : type stuff from the variables.


#6

Thanks for the reply, I tried it but it wouldn’t work
I’ve opened a topic stating something similar as this.

How to view .pdf file inside a folder in app using file system


#7

Hi @kumaran,

Thanks for the code. Is this working in iOS? Did you check?