使用 pdf.js 库和 Angularjs 在 IBM Mobile fist 平台应用程序中显示 PDF 文件

Question

我正在尝试在应用程序中显示 pdf 文件，我已经测试了所有基于 pdf.js 库 https://github.com/mozilla/pdf.js and using angular directives and I tried whit this one https://github.com/akrennmair/ng-pdfviewer which provide a directive and inside it has a service and controller but our application structure is a little different and I had to broke in parts the service and controller, and when I finished the implementation does not work, Then I took a different approach https://github.com/sayanee/angularjs-pdf angular-pdf 指令的不同选项，似乎更直接和易于实施，但不幸的是，结果是一样的。它根本不加载文档，可能是我的 url 路径 pdf 文件错误，我尝试复制与示例相同的结构，这是一个示例 https://github.com/sayanee/angularjs-pdf/tree/master/example 为了 pdf 可以加载并在 canvas

中查看

这是控制器的外观，与 sayanee 基本相同

例子这是我的文件夹结构

/content
-----/mypdf.pdf
/app
----/JS
-----/pdfviewer
------/partials
--------/canvas.html
------/pdfviewer.html
------/pdfviewer.controller.html
------/pdfviewer.module.html
----/index.html

在我的 controller.js

$scope.pdfUrl ='./content/mypdf.pdf';
  console.log( 'controller PDFViewerCtrl::'+ $scope.pdfUrl);
  $scope.scroll = 0;
  $scope.loading = 'loading';

  $scope.getNavStyle = function(scroll) {
    if(scroll > 100) return 'pdf-controls fixed';
    else return 'pdf-controls';
  };

  $scope.onError = function(error) {
    console.log(error);
  };

  $scope.onLoad = function() {
    $scope.loading = '';
  };

  $scope.onProgress = function(progress) {
    console.log(progress);
  };

在pdfviewer.html中我只保留canvas

<hr>
{{loading}}
<canvas id="pdf" class="rotate0" ng-model="pdfUrl"></canvas>

在我的 pdfviewer.html

<ion-view class="pdfViewer" view-title="PDF" hide-nav-bar="false">
  <ion-nav-buttons side="right">
  </ion-nav-buttons>
  <ion-nav-buttons side="left">
    Done
  </ion-nav-buttons>
  <ion-content>
    <div class="wrapper" ng-controller="PDFViewerCtrl">
      <ng-pdf template-url="templates/pdfViewer/partials/canvas.html" canvasid="pdf" scale="page-fit" page=1>
      </ng-pdf>
    </div>
   </ion-content>
</ion-view>

模块如下所示：

angular.module('myapp', ['pdf'])

我还在 index.html

中添加了 pdf.js 库和指令

<script src="js/lib/pdf.js"></script>
<script src="js/directives/angular-pdf.js"></script>

我可以看到它调用指令，然后转到 pdf 库，但是，它挂在 PDFJS.getDocument 中，再也没有回来，所以我只能看到加载标签。

我很确定 pdf.js 和指令有效，但我不确定它是否适用于使用 cordova、Angularjs 和 Ionic 的混合移动应用程序。

对于在应用程序内部或外部显示 pdf 的任何其他建议，我将不胜感激。

Answer 1

好吧，我终于可以将 pdf.js 与 IBM Mobile 第一个项目集成，然后我可以在 Mobile 混合应用程序中显示 pdf 文件，所以除了 inAppBrowser cordova 插件 https://github.com/apache/cordova-plugin-inappbrowser，这里还有其他选项，这是 link，其中 pdf.js 和 angular ionic 在 IBM Mobile first 应用程序中实现。

我希望它可以帮助那些在移动混合应用程序中寻找 pdf 查看器的人。

https://github.com/tenajrm/pdfviewer

使用 pdf.js 库和 Angularjs 在 IBM Mobile fist 平台应用程序中显示 PDF 文件

Display PDF file inside the IBM Mobile fist platform app using pdf.js library and Angularjs

pdf

angularjs

cordova

pdf.js

ibm-mobilefirst