3

ビューアーの外観が本当に好きなので、 pdf.jsプロジェクトのviewer.js機能をカプセル化する Angular ディレクティブを作成しようとしていますが、自分の Angular バインディングから変数を渡すことができるようにしたいと考えています。

現在、Sayanee のプロジェクト ( https://github.com/sayanee/angularjs-pdf ) のような 2 つの angular-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

コメントの 1 つに記載されているように、https://github.com/jviereck/pdfListViewで入手できる情報は、ビューアーの Angular コンテキスト内で最適に見える方法を決定するのに非常に役立つことがわかりました。

于 2015-02-09T16:53:33.473 に答える