Display pdf inside an ionic app

Question

Im developing an app with ionic framework and I need to display a pdf.

I've read a lot on the internet and found this directive to use

https://github.com/winkerVSbecks/angular-pdf-viewer

The problem is that I'm having problems to integrate the directive with my ionic app.

I've done the indicated steps:

1. bower install angular-pdf-viewer

2. Include the path to the lib, AngularJS and PDFJS: (here I changed the paths)

     <script src="lib/pdfjs-dist/build/pdf.js"></script>
     <script src="lib/angular/angular.js"></script>
     <script src="lib/angular-pdf-viewer/dist/angular-pdf-viewer.min.js"></script>
   

3. Include the lib as a dependency in your angular app:

     var app = angular.module('App', ['pdf']);
   

Then I put this in the template

<pdf-viewer    delegate-handle="my-pdf-container"    url="www.publishers.org.uk/_resources/assets/attachment/full/0/2091.pdf" scale="1"    show-toolbar="true"    ></pdf-viewer>

But I get this error

[$parse:syntax] Syntax Error: Token 'pdf' is an unexpected token at column 64 of the expression

What am I doing wrong?

Thanks in advance!

Answer 1

Try using this Phonegap plugin https://github.com/ti8m/DocumentHandler

Below is how I integrated it on ng-click.

$scope.HandleDocumentPlugin = function () {
    if (DocumentViewer != null) {
        DocumentViewer.previewFileFromUrlOrPath(
            function () {
                console.log('success');
            }, function (error) {
                if (error == 53) {
                    console.log('No app that handles this file type.');
                    var alert = $ionicPopup.alert({
                        title: 'Alert!',
                        template: "There is no app installed that handles this file type."
                    });
                    alert.then(function (res) {

                    });
                }
            }, $scope.PDF_URL);
    }
    else if (DocumentHandler != null) {
        DocumentHandler.previewFileFromUrlOrPath(
           function () {
               console.log('success');
           }, function (error) {
               if (error == 53) {
                   console.log('No app that handles this file type.');
                   var alert = $ionicPopup.alert({
                       title: 'Alert!',
                       template: "There is no app installed that handles this file type."
                   });
                   alert.then(function (res) {

                   });
               }
           }, $scope.PDF_URL);
    }
    else {
        console.log("error");
    }
}

Answer 2

I believe the url value is meant to point to your scope. So given that you have $scope.pdf = "the url you want", you would do url="pdf" in the tag.