3

我正在尝试制作一个封装pdf.js项目的viewer.js功能的 Angular 指令，因为我真的很喜欢他们的查看器的外观，但我希望能够从我自己的 Angular 绑定中传递变量。

现在，有两个类似 angular-pdf 的项目，例如 Sayanee 的项目 ( https://github.com/sayane/angularjs-pdf )，看起来它主要提供https://github.com/mozilla上的基本功能/pdf.js/blob/master/examples/text-selection/js/minimal.js和 Anrennmair 的项目，位于https://github.com/akrennmair/ng-pdfviewer

这些 pdf 查看器确实看起来不太好，我喜欢 pdf.js 查看器如何在页面视图中显示页面并让您轻松滚动浏览它们。我不需要打印、书签、附件、保存、打开等的所有功能，这样至少可以节省一些工作，但我的问题是：

如何将此查看器编写为指令？更具体地说，在对上一个问题的回答中，受访者表示，从角度来看，第一个 GitHub 项目设计不佳。这样做的正确方法是什么？我更愿意根据一些最佳实践在第一次写好它，但我一直无法找到任何关于这些实践在这个范围内的明确信息。

4

2 回答 2

3

基本上你需要被限制在指令元素上。使用模板添加canvas和div标签。然后在link函数中调用它们来渲染 pdf。

您可以更进一步，将PDFJS 和render和load函数包装在角度服务中，然后将其注入指令中。这样加载和渲染方法将位于服务中，指令将设置模板并调用它们。

标记：

<pdf-viewer pdf-path="pathToYourPdf"></pdf-viewer>

指令： 这实际上不是一个功能指令，但它应该让您大致了解如何实现您正在寻找的东西。

angular.module('myApp', [])
  .directive('pdfViewer', [

    function() {
      return {
        template: '<canvas></canvas><div></div>',
        replace: true,
        restrict: 'E',
        scope: {
          pdfPath: '='
        },
        link: function postLink(scope, iElement, iAttrs) {
          scope.pdfPath = iAttrs.$eval(pdfPath);

          scope.pdf = PDFJS.getDocument(scope.pdfPath);

          scope.pdf
            .then(renderPdf);

          var renderPdf = function() {
            service.pdf.getPage(1)
              .then(renderPage);
          };

          var renderPage = function(page) {
            var viewport = page.getViewport(scale);
            var canvas = iElement.find('canvas')[0];
            // Set the canvas height and width to the height and width of the viewport
            var context = canvas.getContext("2d");

            // The following few lines of code set up scaling on the context if we are on a HiDPI display
            var outputScale = getOutputScale(context);
            canvas.width = (Math.floor(viewport.width) * outputScale.sx) | 0;
            canvas.height = (Math.floor(viewport.height) * outputScale.sy) | 0;
            canvas.style.width = Math.floor(viewport.width) + 'px';
            canvas.style.height = Math.floor(viewport.height) + 'px';

            // Append the canvas to the pdf container div
            var $pdfContainer = iElement;
            iElement.css("height", canvas.style.height)
              .css("width", canvas.style.width);

            var canvasOffset = canvas.offset();

            var textLayerDiv = iElement.find('div')[0];

            textLayerDiv
              .addClass("textLayer")
              .css("height", canvas.style.height)
              .css("width", canvas.style.width)
              .offset({
                top: canvasOffset.top,
                left: canvasOffset.left
              });

            context._scaleX = outputScale.sx;
            context._scaleY = outputScale.sy;
            if (outputScale.scaled) {
              context.scale(outputScale.sx, outputScale.sy);
            }

            page.getTextContent()
              .then(function(textContent) {
                var textLayer = new TextLayerBuilder({
                  textLayerDiv: textLayerDiv,
                  viewport: viewport,
                  pageIndex: 0
                });

                textLayer.setTextContent(textContent);

                var renderContext = {
                  canvasContext: context,
                  viewport: viewport
                };

                page.render(renderContext);
              });
          };
        }
      };
    }
  ]);
于 2014-06-29T14:56:58.727 回答
-2

正如其中一条评论中提到的，我发现https://github.com/jviereck/pdfListView提供的信息对于确定如何在看起来也是最佳的查看器中的 Angular 上下文中执行此操作非常有帮助。

于 2015-02-09T16:53:33.473 回答