Ionic framework PdfViewer

问题:

I want to develop pdf ebook application for mobile. Is there pdf viewer component for ionic framework. I fond mozilla pdf.js . I need ionic project example.

回答1:

Have you tried the angular module ng-pdfviewer? Because angular works under the hood of Ionic.

回答2:

 var app = angular.module('testApp', [ 'ngPDFViewer' ]);

 app.controller('TestCtrl', [ '$scope', 'PDFViewerService', function($scope, pdf) {
  $scope.viewer = pdf.Instance("viewer");

  $scope.nextPage = function() {
    $scope.viewer.nextPage();
  };

  $scope.prevPage = function() {
    $scope.viewer.prevPage();
  };

  $scope.pageLoaded = function(curPage, totalPages) {
    $scope.currentPage = curPage;
    $scope.totalPages = totalPages;
  };
  }]);

And the Directive uses the above pdf.js file and the Html is bellow:

<button ng-click="prevPage()">&lt;</button>
<button ng-click="nextPage()">&gt;</button>
<br>
<span>{{currentPage}}/{{totalPages}}</span>
<br>
<pdfviewer src="test.pdf" on-page-load='pageLoaded(page,total)' id="viewer"></pdfviewer>

and using ng-pdf should solve your problem.

回答3:

Have you tried this Phonegap plugin https://github.com/ti8m/DocumentHandler

Below is how I used it.

 $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");
    }
}

回答4:

You could use Cordova - InAppBrowser since it will be able to display pdf just open specify the static or dynamic path . you do need to add other modules as this an be also used to open web pages also you could use

https://github.com/initialxy/cordova-plugin-themeablebrowser

to theme the pdf openings for custom loading to hide url etc fields

these two approaches can be used to open a simple pdf document for reading purposes.

but for more specific options you should go with

https://github.com/akrennmair/ng-pdfviewer

which requires pdf.js and pdf.compat.js.

add it as a dependency in your app.

var app = angular.module('testApp', [ 'ngPDFViewer' ]);

basic controller syntax useage :

app.controller('TestCtrl', [ '$scope', 'PDFViewerService', function($scope, 
pdf) {
    $scope.viewer = pdf.Instance("viewer");

    $scope.nextPage = function() {
        $scope.viewer.nextPage();
    };

    $scope.prevPage = function() {
        $scope.viewer.prevPage();
    };

    $scope.pageLoaded = function(curPage, totalPages) {
        $scope.currentPage = curPage;
        $scope.totalPages = totalPages;
    };
}]);

回答5:

you can use pdfmake library to generate the pdf, there is a good example to integrate it to ionic