CODEWITHSUNDEEP
angularjscordovapdfibm-mobilefirstpdf.js
Jan
Jan

Reputation: 945

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

I'm trying to display pdf file in the app, I already tested different options all of them based on pdf.js library 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 directive, it seems to be more straightforward and easy to implement, but unfortunately the result is the same. It simply does not load the document, it can be my url path pdf file is wrong, I tried to copy the same structure that the example, This is an example https://github.com/sayanee/angularjs-pdf/tree/master/example on order to the pdf can load and see it in the canvas

This is how the controller looks and this is basically the same that the sayanee

Example this is my folder structure

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

in my 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);
  };

in pdfviewer.html I just keep the canvas

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

and in my 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>

the module looks like this:

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

I also added the pdf.js library and the directive in the index.html 

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

I can see that it call to the directive and then it goes to pdf library but, and it hangs in PDFJS.getDocument and never comes back so I just can see loading label.

I'm pretty sure that pdf.js and the directives works, but I'm not sure if it works with Hybrid Mobile application using cordova, Angularjs and Ionic.

I'll appreciate any other suggestion to display pdf inside or outside of the app or.

Upvotes: 0

Views: 741

Answers (1)

Jan
Jan

Reputation: 945

Well I finally could integrate the pdf.js with IBM Mobile first project, then I can display pdf files inside of Mobile hybrid app, so here is other option beside of inAppBrowser cordova plugin https://github.com/apache/cordova-plugin-inappbrowser, and this is the link where pdf.js and angular ionic is implemented in the IBM Mobile first app.

I hope that it can help someone that looking for pdf viewer inside of Mobile hybrid app.

https://github.com/tenajrm/pdfviewer

Upvotes: 0

Related Questions