Ionic框架PdfViewer

Question

我希望开发适用于移动设备的PDF电子书应用。请问Ionic框架中是否有PDF查看器组件？我发现了Mozilla PDF.js。我需要一个Ionic项目示例。

- MahmutHAKTAN

---

你在使用哪个版本的Ionic？ - Rich

Answer 1

你有没有尝试过Angular模块ng-pdfviewer？因为Ionic的底层正是基于Angular构建的。

- RWAM

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文件，HTML如下：

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

使用ng-pdf应该可以解决您的问题。

- Moshiour

Answer 3

你可以使用Cordova - InAppBrowser，因为它能够打开指定的静态或动态路径并显示PDF文件。你不需要添加其他模块，因为它也可以用于打开网页。

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

我希望您能为自定义加载主题pdf开头提供翻译，以隐藏url等字段。

这两种方法可以用于打开简单的pdf文档以进行阅读。

但是，如果需要更具体的选项，您应该选择

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

- Omkar Tondawalkar

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

- DevSab

Answer 5

你可以使用pdfmake库来生成PDF，有一个很好的示例可以将其集成到Ionic中

- user2601376