How to download and render pdf file in nativescript


#1

source code is provided below …not throwing any error but still cant view the file
html file

<GridLayout>
        <StackLayout  rows="auto, *, auto, auto, auto">
                <Label width="50%" row="0" text="Report Type : Certs" color="black"></Label>
                <FlexboxLayout  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>
        
</GridLayout>

ts file

import { Component, OnInit, NgZone, OnDestroy } from "@angular/core";
import { PDFView } from "nativescript-pdf-view";
import { registerElement } from "nativescript-angular";
registerElement("PDFView", () => PDFView);

@Component({
    selector: "ns-photo-capture",
    moduleId: module.id,
    templateUrl: "./nda-agreement.component.html",
    styleUrls: ["./nda-agreement.component.css"]
})
export class NDAAgreementComponent implements OnInit {
public constructor(private ndaagreementservice: NDAAgreementService) {
    console.log("in NDA agreement constructor");
}
    pdfpath: string;
    ngOnInit() {
        this.pdfpath = "https://www.princexml.com/howcome/2016/samples/magic8/index.pdf" ;
    }
}

Please suggest


#2

You are confusing the syntax between Core & Angular - It should be just <PDFView ... instead of <pdf:PDFView ...

If you still face issues, please describe the errors in detail.


#3

did the suuggested change …but still no change in output

logs

0x1c40dccb0 - UIProcess is taking a background assertion because a page load started
0x14614b018 - UIProcess is taking a foreground assertion because the view is visible
0x10cf3c138 - ProcessThrottler::didConnectToProcess(2429)
0x1c046d7c0 - ProcessAssertion() Acquiring assertion for process with PID 2429
0x10cf40210 - ProcessThrottler::didConnectToProcess(2428)
0x1c04758c0 - ProcessAssertion() Acquiring assertion for process with PID 2428
0x1c105ad30 - WKProcessAssertionBackgroundTaskManager - beginBackgroundTaskWithName
0x10cf40000 - WebProcessProxy::didSetAssertionState(Foreground) taking foreground assertion for network process
0x10cf3c138 - ProcessThrottler::updateAssertionNow() updating process assertion state to 2 (foregroundActivities: 1, backgroundActivities: 0)
0x1c046d7c0 - ProcessAssertion::setState(2)
UIProcess is taking a background assertion because the WebContent process is holding locked files
0x10cf40000 - WebProcessProxy::didSetAssertionState(Foreground) taking foreground assertion for network process
UIProcess is releasing a background assertion because the WebContent process is no longer holding locked files
0x10cf40000 - WebProcessProxy::didSetAssertionState(Foreground) taking foreground assertion for network process
0x1c40dccb0 UIProcess is releasing a background assertion because a page load completed
0x10cf40000 - WebProcessProxy::didSetAssertionState(Foreground) taking foreground assertion for network process
Status bar could not find cached time string image. Rendering in-process.



#4

I believe you are testing with iOS, it should work with Playground. Can you try reproducing the issue there?


#5

yes i am testing in ios…ok let me try to copy in playround


#6

#7

this is the latest url …pls follow this


#8

tried to run the app by replicating in playground but still there is no change in output


#9

Learn more about layouts at


#10

thanks…it is working…but what change you did in the code


#11

ok got it…it should be grid layout and not flexlayout


#12

if i am getting the pdf file using http get api…how can i download the file and render in GUI


#13

Internally the plugin downloads the file itself. If you prefer to download yourself, set the full file path to src property.


#14

i am getting following error:
CONSOLE LOG file:///app/pages/NDA-agreement/nda-agreement.component.js:28:24: error {
“headers”: {
“normalizedNames”: {},
“lazyUpdate”: null,
“headers”: {}
},
“status”: 200,
“statusText”: “Unknown Error”,
“url”: null,
“ok”: false,
“name”: “HttpErrorResponse”,
“message”: “Http failure during parsing for (unknown url)”,
“error”: {
“line”: 169,
“column”: 61,
“sourceURL”: “file:///app/tns_modules/tns-core-modules/http/http-request/http-request.js”
}
}

source code:

in component file:

private sessionservice: SessionService) {}
    pdfpath: any;
    ngOnInit() {
        this.ndaagreementservice.getpdf().subscribe(data => {
            this.pdfpath = data ;
    },
error => {
    console.log("error", error);
});

service file

  public  getpdf() {
        console.log(this.sessionservice.geturl() + "/nda/" + this.Config.API.locationCode);
      return  this.http.get(this.sessionservice.geturl() + "/nda/" + encodeURIComponent(this.Config.API.locationCode) ,
        {
            headers: { "Authorization": applicationSettings.getString("token") }
    });
}

#15

but the url is fine and working…it worked well with postman


#16

Are you sure getpdf() emits a path? I guess it would be blob / text.


#17

The backend API is returning a file…

I tried adding response type as blob but it is not supported by http client.


#18

I don’t think Http writes a file internally, make sure you are setting a file path and it exists. Let us know if you could reproduce it with Playground.


#19

#20

after adding the path…i did worked for me…thanks :slight_smile: