2015-03-11 12 views
5

Chcę opracować aplikację ebook PDF na urządzenia mobilne. Czy istnieje komponent przeglądarki PDF dla architektury jonowej. Bardzo lubię mozilla pdf.js. Potrzebuję przykładu z projektu jonowego.Struktura jonowa PdfViewer

Odpowiedz

7

Czy wypróbowałeś moduł kątowy ng-pdfviewer? Ponieważ kątowe działa pod maską jonowych.

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; 
    }; 
    }]); 

i dyrektywa wykorzystuje powyższe PDF.js złożyć i HTML jest poniżej:

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

i korzystania ng-pdf powinno rozwiązać problem.

0

można użyć pdfmake bibliotekę do generowania pdf, istnieje duża example zintegrować go jonowego

1

Czy próbowałeś ten PhoneGap wtyczki https://github.com/ti8m/DocumentHandler

Poniżej jest jak użyłem go.

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

Można użyć Cordova - InAppBrowser ponieważ będzie w stanie wyświetlić pdf wystarczy otworzyć określić statyczny lub dynamiczny ścieżkę. trzeba zrobić, aby dodać inne moduły, jak to za być również używany do otwierania stron internetowych również można użyć

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

do tematu otworów pdf za zwyczaj ładowanie ukryć url itp pól

te dwa podejścia może być użyty do otwarcia prostego dokumentu PDF do celów czytania.

ale bardziej konkretnych opcji należy udać się z

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

która wymaga PDF.js i pdf.compat.js.

dodaj jako zależność w swojej aplikacji.

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

podstawowy kontroler useage składnia:

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; 
    }; 
}]);