CODEWITHSUNDEEP
angularjspdf
Aakash
Aakash

Reputation: 675

cant view pdf in angularjs pdf viewer

I want to display menus which can be image as well as pdf .

I am using ng-pdfviewer to achieve this . My controller code is ::

venueApp.controller('venueController',['$scope',PDFViewerService',function($scope,pdf){
   $scope.viewer = pdf.Instance("viewer");
   $scope.pageLoaded = function(curPage, totalPages) {
     $scope.currentPage = curPage;
     $scope.totalPages = totalPages;
   };
   $scope.nextPage = function() {
     $scope.viewer.nextPage();
   };

   $scope.prevPage = function() {
      $scope.viewer.prevPage();
   };
}]);

and my html code is ::

<a id="image_{[ menu.id ]}" ng-if="menu.filename.indexOf('.pdf') > -1">
  <button ng-click="prevPage()">&lt;</button>
  <button ng-click="nextPage()">&gt;</button>
  <br>
  <span>{[currentPage]}/{[totalPages]}</span>
  <br>
  <pdfviewer src="{[menu.menu_url]}" on-page-load='pageLoaded(page,total)' id="viewer"></pdfviewer>
</a>

I am using {[]} for expression evalutaion because i configured it to . Now in my console , the plugin is outputting the correct messages i guess

Printed in console by this plugin

src attribute changed, new value is https://d1hpn7r5i0azx7.cloudfront.net/uploads/menu/18/ankush.pdf

loadPDF https://d1hpn7r5i0azx7.cloudfront.net/uploads/menu/18/ankush.pdf

Warning: Deprecated API usage: getDocument is called with pdfDataRangeTransport, passwordCallback or progressCallback argument -- printed by pdf.js

But the pdf is not being painted . My DOM element for the padf viewer tag is ::

<pdfviewer src="https://d1hpn7r5i0azx7.cloudfront.net/uploads/menu/18/ankush.pdf" on-page-load="pageLoaded(page,total)" id="viewer" class="ng-isolate-scope"><canvas></canvas></pdfviewer>

I dont understand what is the issue . Maybe it is with the pdf file as chrome also does not display it , instead just downloads it . the link for the sample pdf is ::

https://d1hpn7r5i0azx7.cloudfront.net/uploads/menu/18/ankush.pdf

Also i am posting this question in SO instead of just posting it in the github plugin page because i seriously think it has to do something with the pdf file instead od the plugin .

P.S it is not my CV , just took one from the pool of applicants in our company :P

Upvotes: 0

Views: 3874

Answers (1)

Jainish Jariwala
Jainish Jariwala

Reputation: 308

I have used http://viewerjs.org/ for offline pdf with angular. But here it seems you have online pdf path . So why are you not trying google document viewer ? It is best for online documents.

Please look at following link: https://docs.google.com/gview?url=http://infolab.stanford.edu/pub/papers/google.pdf you need to change url parameter with your path.

Also you can use this link in your website with iframe as following:

<iframe src="http://docs.google.com/gview?url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true" style="width:600px; height:500px;" frameborder="0"></iframe>

Upvotes: 2

Related Questions