Reputation: 675
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()"><</button>
<button ng-click="nextPage()">></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
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