Question

我想显示可以是图像的菜单以及pdf。

我正在使用ng-pdfviewer来实现这一目标。我的控制器代码是::

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

我的html代码是::

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

我正在使用{[]}表达式evalutaion，因为我将其配置为。现在在我的控制台中，插件正在输出正确的消息我猜

通过此插件在控制台中打印

src属性已更改，新值为https://d1hpn7r5i0azx7.cloudfront.net/uploads/menu/18/ankush.pdf

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

警告：不推荐使用API：使用pdfDataRangeTransport，passwordCallback或progressCallback参数调用getDocument - 由pdf.js打印

但是pdf没有被绘制。 padf viewer标签的我的DOM元素是::

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

我不明白这是什么问题。也许它与pdf文件一样，因为chrome也不会显示它，而只是下载它。样本pdf的链接是::

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

我也是在SO中发布这个问题，而不是仅仅在github插件页面中发布它，因为我认真地认为它必须用pdf文件来代替插件。

P.S这不是我的简历，只是从我们公司的申请人中抽出一个：P

Answer 1

我已将http://viewerjs.org/用于带有角度的离线pdf。但在这里，你似乎有在线pdf路径。那么你为什么不尝试谷歌文档查看器？最适合在线文档。

请看以下链接： https://docs.google.com/gview?url=http://infolab.stanford.edu/pub/papers/google.pdf 你需要用你的路径改变url参数。

此外，您可以在您的网站中使用iframe链接，如下所示：

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

无法在angularjs中查看pdf pdf viewer

1 个答案: