How to open local PDF files from ng-click for an android app?

ionic-v1
1

I have stored a bunch of PDF files in: www//pdf/ and want to parse the files to show a list - however to save time, I’ve just stored all the filepaths in a pdfController as an array.

Now I have an ng-repeat listing each item and want to use ng-click myFunction() to open the pdf file as a popup for the application or similar.

Is there anyway to do this in Android ?

2

Open this pdf in In App browser:

window.open('http://whitelisted-url.com/pdftoopen.pdf', '_blank');

in your case it should look something like this:

window.open(encodeURI('full/path/to/file.pdf'), '_system');

Plugin: https://github.com/apache/cordova-plugin-inappbrowser

Or you can use this plugin: https://github.com/don/FileOpener

Update: Don’t use FileOpener plugin, it’s deprecated. Use ngCordova FileOpener2. Just one warning, it can’t open assets content, file must be placed in a real system directory. I wrote a tutorial on this topic, read it here.

4 Likes
3

i would use this:

and let the system handle it → on android you get a list of apps which can handle the filetype or uses the default app automatically

4

What would the full PDF file path be ? Because doing:

window.open(encodeURI(‘pdf/file.pdf’), ‘_system’); - works for web test in my browser but doesn’t work on the Android app.

I get ‘invalid path’ - do I need to prefix it with www/ ?

5

nope you need the fullpath to the file on your local device.
In which folder is the pdf?

or is it referenced to a website

6

It’s localhost, it’s inside the ionic app’s folder: www/pdf/file.pdf

Unsure how to create a full file path once the app is installed ? Is it possible to get these values ? If not, I know I won’t change the name of the app and it’s just for 2 Android devices (same devices) so can hard-code it directly

7

@bengtler if it’s not possible to easily access the pdf files within www/ then I can install them do Download/pdf file on sdcard or similar manually.

In that case, what would the file path be ?

8

sry i forgot to answer the question.

for the download approach you need the file and file-transfer plugin.
with both you can first request the local filesystem --> so get access to the sdcard and so on. after that you can create own directories like “com.youCompany.youApp” and with file-transfer plugin you can download a file. on the filesystem you can get directories and files. a fileentry has a function toURL(), where you get the fullpath of the file.

9

Ok, but I don’t want to code my app to “download” the files. I put the files inside the app already… unless I can “download” from the localhost version inside the app ?

Anyway, if I manually put all pdf files in a folder on the sdcard Download folder - can I access these ? If so, what would the fullpath be ?

Thanks

10

for that you can also use cordova-file plugin,

request the filesystem:

$window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function (fileSystem) {
});

with the filesystem you get now access to your sdcard/localFileSystem and with

fileSystem.root.toURL()

you can get the basepath of that --> and then you can concat your folder-structure and the filenames

1 Like
11

fileSystem.root.toURL() returns file:///storage/emulated/0/

But I need:

file:///sdcard/Download/pdf

EDIT: ah never mind, the storage/emulated/0 is sdcard so I just had to remove that from my path concat and it works :smile:

Thanks @bengtler