आयोनिक ढांचे PdfViewer

Question

मैं मोबाइल के लिए पीडीएफ ebook आवेदन विकसित करना चाहते हैं। आयनिक ढांचे के लिए पीडीएफ दर्शक घटक है। मैं mozilla pdf.js शौकीन हूँ। मुझे आयनिक परियोजना उदाहरण की आवश्यकता है।

Answer 1

आप कोणीय मॉड्यूल ng-pdfviewer की कोशिश की है? चूंकि कोणीय आयनिक के हुड के नीचे काम करता है।

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

और निर्देशक ऊपर pdf.js फ़ाइल उपयोग करता है और एचटीएमएल 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> 

और का उपयोग कर एनजी-पीडीएफ आपकी समस्या का समाधान करना चाहिए।

Answer 3

आप pdfmake लाइब्रेरी का उपयोग पीडीएफ उत्पन्न करने के लिए कर सकते हैं, वहाँ एक अच्छा example यह आयनिक को एकीकृत करने के लिए है

Answer 4

आप इस Phonegap प्लगइन https://github.com/ti8m/DocumentHandler

की कोशिश की है नीचे मैं इसे कैसे किया जाता है।

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

आप कॉर्डोबा इस्तेमाल कर सकते हैं - InAppBrowser के बाद से यह पीडीएफ प्रदर्शित करने के लिए सिर्फ स्थिर या गतिशील पथ निर्दिष्ट खोलने में सक्षम हो जाएगा। आप इस रूप में अन्य मॉड्यूल जोड़ने के लिए एक भी भी वेब पृष्ठों को खोलने के लिए किया जा आप पीडीएफ उद्घाटन विषय को

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

इस्तेमाल कर सकते हैं कस्टम लोड हो रहा है यूआरएल आदि क्षेत्रों

इन दो दृष्टिकोण को छिपाने के लिए के लिए की आवश्यकता क्यों है पढ़ने के उद्देश्यों के लिए एक साधारण पीडीएफ दस्तावेज खोलने के लिए इस्तेमाल किया जा सकता है।

लेकिन अधिक विशिष्ट विकल्प के लिए आप

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

जो pdf.js और pdf.compat.js की आवश्यकता के साथ जाना चाहिए।

अपने ऐप्लिकेशन में निर्भरता के रूप में जोड़ें।

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