Ionique cadre PdfViewer

Je veux développer ebook pdf application pour mobile. Est-il pdf viewer composante ionique cadre. Je friands de mozilla pdf.js . J'ai besoin ionique exemple de projet.

  • quelle est la version de Ionique êtes-vous travailler?
InformationsquelleAutor MahmutHAKTAN | 2015-03-11
  1. 7

    Avez-vous essayé le module angulaire ng-pdfviewer? Car angulaire fonctionne sous le capot de l'Ionique.

    InformationsquelleAutor RWAM
  2. 3
     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;
  };
  }]);

    Et la Directive utilise le ci-dessus pdf.js fichier
    et le code Html est ci-dessous:

    <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>

    et à l'aide de ng-pdf devrait résoudre votre problème.

    InformationsquelleAutor Moshiour
  3. 1

    Avez-vous essayé ce plugin Phonegap https://github.com/ti8m/DocumentHandler

    Ci-dessous est la façon dont je l'ai utilisé.

     $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");
    }
}
    InformationsquelleAutor DevSab
  4. 1

    Vous pouvez utiliser Cordova - InAppBrowser puisqu'il sera en mesure d'afficher le pdf il suffit d'ouvrir spécifier la statique ou dynamique chemin . vous avez besoin d'ajouter d'autres modules, comme ce peut être également utilisé pour ouvrir des pages web vous pouvez également utiliser

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

    pour thème le pdf d'ouvertures pour le chargement personnalisé pour masquer l'url etc champs

    ces deux approches peuvent être utilisées pour ouvrir un simple document pdf pour la lecture fins.

    mais pour plus d'options spécifiques que vous devriez aller avec

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

    qui nécessite pdf.js et pdf.compat.js.

    l'ajouter en tant que dépendance dans votre application.

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

    contrôleur de base de la syntaxe 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;
    };
}]);
    InformationsquelleAutor Omkar Tondawalkar
  5. 0

    vous pouvez utiliser pdfmake bibliothèque pour générer le fichier pdf, il y a une bonne exemple de l'intégrer à ionique

    InformationsquelleAutor Sidali Hallak