AngularJS - can I display a document in a HTML file?

Question

I am looking for a solution to display a document in a mobile application I am developing using AngularJS and Cordova/Phonegap.

I am using a Web Service that returns the raw content for a file, so for example I use my AngularJS service to use the Web Service to get a file, what it returns is the raw content of the file. In the case I show below it is a Word document. But it could be PDF, Excel, Powerpoint etc...

I am relatively new to AngularJS and with only some experience with HTML and Javascript I am looking for guidance on the best approach to use the raw data from the web service to display the document inline in my application.

Below is my current code and an image from my device to show what I am currently getting. My question is what is my best approach from here to get the document to a viewable state in the application?

My service:

myApp.services.factory('DownloadDocResource', ['$resource', function    ($resource) {
     return $resource('http://myWebSerivceURL/Documents/myTestDoc.doc', {}, {'query':  {method: 'GET', isArray: false}});
}]);

myApp.services.factory('DownloadDocService', ['$q', 'DownloadDocResource', function($q, DownloadDocResource) {
return {
    getDocument: function() {
        var delay = $q.defer();
        DownloadDocResource.query(
            function (response) {
                delay.resolve(response);
            },
            function (response) {
                delay.reject("can't get document source");
            });
        return delay.promise;
    }
}
}]);

My Controller:

myApp.controllers.controller("DownloadDocCtrl", ['$scope', 'DownloadDocService',
function ($scope, DownloadDocService) {
    DownloadDocService.getDocument().then(function (document) {
        $scope.document = document;
    });
}
]);

My HTML:

<div style="color:#FFFFFF" ng-controller="DownloadDocCtrl">
{{document}}
</div>

Outcome:

outcome

score 1 · Answer 1 · edited May 23 '17 at 11:45

No, you would have to have some way to parse the document. DocX is actually a huge xml file and I am pretty sure that unless microsoft provided a way to do this using silverlight, that it probably cannot be done using angular alone.

however, you may be able to use some native intent on your andoid app... or you may be able to write a custom intent using some doc library. I would strongly recommend http://poi.apache.org/.

This answer:

Here are some links that may be useful in creating this intent access. The user will probably need something that reacts to an intent that emits a .doc mimetype. But the documentation should clear some of that up.

Is there an Intent for viewing documents (Word, Excel, Powerpoint, PDF, etc.) in Android?

http://devgirl.org/2013/07/17/tutorial-how-to-write-a-phonegap-plugin-for-android/

score 1 · Answer 2 · answered Jun 12 '14 at 11:14

1

Will all your users have same applications for documents i.e. Word, PDF, Excel? etc?
1. Are you targetting any specific client applications? e.g. All users should have Microsoft Office installed?

Above questions will also decide the format of the file that you get from database/service. Is it an option that users download a file and then open with their preferred/ installed applications? Or you are developing a generic file viewer?

answered Jun 12 '14 at 11:14

Darshan Joshi

362
1
11

Generic viewer inline in the app would be prefered option but getting the document to download and allow the user to then open it with their prefered application would be acceptable. – Donal Rafferty Jun 12 '14 at 11:25

AngularJS - can I display a document in a HTML file?

2 Answers2