Search This Blog

Thursday 19 November 2015

View/show/open documents in ionic

To see documents using cordova a plugin is available called DocumentHandler
using this you can directly open a remote files of type pdf,docx,xlsx,ppt,txt

to install the plugin:
ionic plugin add https://github.com/ti8mag/DocumentHandler.git

after installing to view a document use the following snippet:

window.handleDocumentWithURL(function() { console.log('success'); },
                             function(error) { console.log('failure'); if (error == 53) { console.log('No app that handles this file type.'); } },
                             "path-to-file");

path can be a local path or a remote path

if you want to download and then show you need to use FileTransfer and File cordova API's first to get the file and then you can use DocumentHandler plug-in to show a file

ionic plugin add cordova-plugin-file  // file is to choose local storage location
ionic plugin add cordova-plugin-file-transfer // file-transfer to download a file

use the below code to download and show

var fileTransfer = new FileTransfer();
    var uri = encodeURI("http://media.metro.net/riding_metro/bus_overview/images/230.pdf");
    $window.alert("uri:"+uri);
    console.log("uri:"+uri);
    var store = cordova.file.dataDirectory;
    var fileName = "365.pdf";
            fileTransfer.download(
                                  uri,
                                  store+fileName,
                                  function(entry) {
                                  $window.alert("download complete: " + entry.toURL());
                                  console.log("download complete: " + entry.toURL());
                                  window.handleDocumentWithURL(function() { console.log('success'); },
                                  function(error) { console.log('failure'); if (error == 53) { console.log('No app that handles this file type.'); } },
                                  entry.toURL());
                                  },
                                  function(error) {
                                  $window.alert("download error source " + error.source+"download error source " + error.source);
                                  console.log("download error source " + error.source);
                                  console.log("download error target " + error.target);
                                  console.log("upload error code" + error.code);
                                  },
                                  false,
                                  {
                                  headers: {
                                  "Authorization": "Basic dGVzdHVzZXJuYW1lOnRlc3RwYXNzd29yZA=="
                                  }
                                  }
                                  );

DocumentHandler gives additional options to share the files. good & easy to use plugin

Note: it uses quicklook framework in ios, and in android it give a list of open with options to open the doc

No comments:

Post a Comment