Ionic framework PdfViewer

Question

Tôi muốn phát triển ứng dụng ebook pdf cho thiết bị di động. Có thành phần xem pdf cho khung ion. Tôi thích mozilla pdf.js. Tôi cần ví dụ về dự án ion.

Answer 1

Bạn đã thử mô-đun góc ng-pdfviewer? Bởi vì góc hoạt động dưới mui xe của Ionic.

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

Và Chỉ sử dụng pdf.js trên nộp và Html là dưới đây:

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

và sử dụng ng-pdf nên giải quyết vấn đề của bạn.

Answer 3

bạn có thể sử dụng pdfmake thư viện để tạo ra pdf, có một tốt example để tích hợp nó vào Ionic

Answer 4

Các bạn đã thử plugin này PhoneGap https://github.com/ti8m/DocumentHandler

Dưới đây là cách tôi sử dụng nó.

$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

Bạn có thể sử dụng Cordova - InAppBrowser vì nó sẽ có thể hiển thị pdf vừa mở chỉ định đường dẫn tĩnh hoặc động. bạn cần phải thêm các module khác như thế này một thể cũng sử dụng để mở các trang web cũng có thể bạn có thể sử dụng

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

đến chủ đề các lỗ pdf cho tùy chỉnh tải để ẩn url vv lĩnh vực

hai cách tiếp cận này có thể được sử dụng để mở một tài liệu pdf đơn giản cho các mục đích đọc.

nhưng đối với tùy chọn cụ thể hơn bạn nên đi với

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

đòi hỏi pdf.js và pdf.compat.js.

thêm nó làm phụ thuộc trong ứng dụng của bạn.

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

cơ bản năng bảo mật bằng cú pháp điều khiển:

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