Open a pdf file in ionic

Ionic Framework ionic-v3
1

i use InAppBrowser plugin in my app with this code:

In .js file:

    openURL(url) {
        InAppBrowser.open(url,'_system','location=yes');
    }

In .html file:

    <button (click)="openURL('a.pdf')">Open pdf</button>

When i press on button the device ask me to select a program to open file, then i select adobe reader pdf. But adobe reader pdf tells me ‘impossible to load file …’.

Maybe i must give the right path of my a.pdf file. I copied a.pdf file in various folder in my project but nothing.

Thank you.

1 Like
2

Sounds like a good plan. Make sure you use the full path to the file, otherwise I don’t think it will work. Other than that I don’t think the problem is Ionic related, perhaps something wrong with the application you open it with or something wrong with the file.

3

In .html file i use:

<button (click)="openURL('a.pdf')">Open pdf </button>

I don’t give any path. In which folder of the project the pdf file must be positioned? And when i call openURL what url i must insert? I tried with openURL('file:///android_asset/www/a.pdf') but nothing. I also don’t think the problem is Ionic related.
Thank you.

4

Well this is a forum for ionic related questions, so you might wanna try out stackoverflow or something :slight_smile:

Where you put your pdf files and what the full path is entirely up to you. I am just trying to tell that you should make sure that you use the full path to the pdf file when you want to open it. And not just use a.pdf for example.

Is it a downloaded pdf file? Or is it something you put in your assets folder as a developer? You need to give me more info if you want me to help you.

5

Ok, it is a file that i put in my project in folder ‘www’. I don’t know what url insert in openURL(url). What is the value of variable string url? (I have an android device and filename ‘a.pdf’)

6

It seems that this is not supported in Android, check out the linked post for more details:

7

Thank you. When i click the button <button (click)="openURL('a.pdf')">Open pdf</button> I see Acrobat Reader that runs, but after i read a message ‘cannot find the file’.
It seems a problem relative to the path of file.

8

It seems that this is pretty tricky - you could check out the following links for ideas:

9

Thank you. I’ll try.

10

I tried with a cordova application app (without ionic) with this code:

window.open('pdf/file.pdf', '_system', 'location=yes');

and it works. The app ask me to open a file with a program, i select acrobat reader and i can see the file.

I tried with ionic1 but i have the same problem with ionic2.

I used this code:

.controller(‘downloadCtrl’, function($scope) {

$scope.openPDF = function() {
window.open(‘pdf/file.pdf’, ‘_system’, ‘location=yes’);
};

})

11

I solved with this:

$scope.openPDF = function(filename) {

newfilename = 'file.pdf'
uri = '/www/pdf/' + filename;
window.resolveLocalFileSystemURL(cordova.file.applicationDirectory + uri, function(fileEntry) {

  window.resolveLocalFileSystemURL(cordova.file.externalDataDirectory, function(dirEntry) {

    fileEntry.copyTo(dirEntry, newfilename, function(newFileEntry) {

      window.open(newFileEntry.nativeURL, '_system', 'location=yes');
    });
  });
});

};

in ionic1.

I didn’t try in ionic2.

12

Checkout ionic 2 Document Viewer plugin, hope this will solve your
problem.

13

Thank you, I didn’t know it :slight_smile:

14

I have tried with Document Viewer plugin but I have this error:

15

Can you please elaborate how your passing the file path to the plugin and also how you specifying the mime type. Adding some code snippet will be more helpful…

16

This is my code:

ionViewDidLoad() {
const options: DocumentViewerOptions = {title: ‘My PDF’};
this.document.viewDocument(‘assets/file.pdf’, ‘application/pdf’, options);
}