Open remote document in Ionic application


I’m looking for a cordova plugin or something else that would allow me to open a remote document (PDF or other) with the phone dedicated application.
In my website, a simple $ is enough to do it but within my Ionic application, I don’t know how to implement an equivalent of it.

I tried with cordova-plugin-inappbrowser but because the document I want to read is only available when I’m connected, I’m redirected to my login page because my session is no longer available in the “inappbrowser” page. So this is not suitable.

I tried with cordova-plugin-file-transfer and it’s ok with android as it is easy to browse file system with it. But it’s not the case with ios.

I also had a look at cordova-plugin-file-opener2 but it’s only for local documents.

Of course it has to work with ios and android.

Is there a simple manner to implement this need ?


Could you define this? To what do you have to be connected and why?

I am connected to my backend server to grab information from my database.

In my website frontend made with AngularJS, I regularly use $ to ask a specific url of my backend server wich returns a “application/pdf” response based on my connected user.

Now, I want to adapt this scenario to my application but I can’t use $

I tried to use inappbrowser plugin but it opens a new webpage without my session. I could implement a SSO to retrieve my user information but I expected there to be a simpler way.

Is that clearer ?

Not really, still seems 2 different problems to me:

  1. How to open a remote file in an Ionic based application.
  2. How to “be connected” to “somewhere”.

Seems you have to solve #2 first before being able to tackle #1.

On the website frontend the user has to log in to be able to download the PDF?
Do you have any user information in the app yet? Do you use a backend API to get the link?

Thank you Sujan12 for trying to help me and sorry for my English…

Yes, he has.

The user logs in the website frontend. Then he browses to a page where he can export a PDF with its own data. He clicks on a button that sends a request to the backend (through $ and at that moment, the backend knows the identity of the user. The backend builds the PDF content based on that connected user with its name for instance and then returns the response with the data and the “application/pdf” content type.

Yes, when I launch my app, I have to identify myself, as in the website. So when I browse in my app, I have content related to me. I have also the same button as in the website to export a PDF with my own data.

Yes. I need to be connected in order to get the PDF document with my data. If not, I can’t reach the backend URL which generates the PDF response because it’s not allowed for an anonymous user.

To sum up, #2 is not a problem : I’m well connected when I browse in my app.

Concerning #1, when I say I want to open a remote file, I mean I want to load the “application/pdf” response sent by the backend, juste like :
$, '_self', '');

Hoping it clearer…

Ok now it works on iOS with :
$, '_blank', 'location=yes');
and with inappbrowser plugin.

But on android, this line of code opens a new browser window with the right url of the PDF in the address bar but the content is blank.

chrome://inspect/#devices doesn’t help me for this. I tried all possible parameters for $ method without success.

Here are the plugins I user for android :

  • com.ionic.keyboard 1.0.4 “Keyboard”
  • cordova-plugin-compat 1.0.0 “Compat”
  • cordova-plugin-console 1.0.0 “Console”
  • cordova-plugin-device 1.0.0 “Device”
  • cordova-plugin-inappbrowser 1.4.0 “InAppBrowser”
  • cordova-plugin-splashscreen 2.0.0 “Splashscreen”
  • cordova-plugin-whitelist 1.0.0 “Whitelist”
  • ionic-plugin-deploy 0.4.1 “IonicDeploy”
  • 0.3.6 “Camera”

And for iOS :

  • cordova-plugin-inappbrowser 1.4.0 “InAppBrowser”

Any idea why I have no content with android platform ?