web-dev-qa-db-ja.com

シンプルなpdf.jsビューアにズーム

私はpdf.jsライブラリを使用してpdfビューアを作成し始めました。いくつかの例が非常に単純であることを本当に気に入ったので、PREV/NExtの例を使用してビューアを開始しました。

https://github.com/mozilla/pdf.js/blob/master/examples/learning/prevnext.html

私はズームインとズームアウトを追加したいと思い、ズームとスクロールをモデリングしたいこのシンプルなビューアを見つけました:

https://github.com/zedr/simple-pdf-reader.js/blob/master/viewer.js

これが私のindex.htmlの私のhtmlです:

         <div class="row">
              <div class="col-md-4">
              <button class="btn btn-primary" id="prev"><i class="fa fa-level-up fa-lg"></i></button>
                <button class="btn btn-primary" id="next"><i class="fa fa-level-down fa-lg"></i></button>
              </div><div class="col-md-4">
                <span>Page: <span id="page_num"></span> / <span id="page_count"></span></span>
                <div id="pdf-controls">
                    <button id="zoom_minus" onclick="url.zoomMinus()"
                      oncontextmenu="return false;" class="btn btn-primary">-</button>
                    <button id="zoom_plus" onclick="url.zoomPlus()"
                      oncontextmenu="return false;" class="btn btn-primary">+</button>
                    <div id="pdf-stats">
                      <p>
                        <span id="pdf-page-zoom">n/a</span> <span>%</span>
                      </p>
                    </div>
                  </div>
              </div><div class="col-md-4 pull-right">
                <a href="sample.pdf" class="btn btn-primary"><i class="fa fa-arrows-alt fa-lg"></i></a>
                <a href="sample.pdf" class="btn btn-primary" download><i class="fa fa-cloud-download fa-lg"></i></a>
              </div>
            </div>
            <br><br>
            <center>
            <div style="overflow: scroll" id="pdfviewer">
              <canvas id="pdfcanvas" style="border:1px solid black; width: 100%"></canvas>
            </div>
            </center>

これは私のviewer.js

            <script id="pdfviewer">
            //
            // If absolute URL from the remote server is provided, configure the CORS
            // header on that server.
            //
            var url = 'sample.pdf';

            //
            // Disable workers to avoid yet another cross-Origin issue (workers need
            // the URL of the script to be loaded, and dynamically loading a cross-Origin
            // script does not work).
            //
            // PDFJS.disableWorker = true;

            //
            // In cases when the pdf.worker.js is located at the different folder than the
            // pdf.js's one, or the pdf.js is executed via eval(), the workerSrc property
            // shall be specified.
            //

            PDFJS.workerSrc = 'pdf.worker.js';

            var pdfDoc = null,
                pageNum = 1,
                pageRendering = false,
                pageNumPending = null,
                scale = 1.5,
                canvas = document.getElementById('pdfcanvas'),
                ctx = canvas.getContext('2d');
            var camera = {
              x: 0,
              y: 0,
              scale: 1,
            };

            /**
             * Get page info from document, resize canvas accordingly, and render page.
             * @param num Page number.
             */
            function renderPage(num) {
              pageRendering = true;
              // Using promise to fetch the page
              pdfDoc.getPage(num).then(function(page) {
                var viewport = page.getViewport(scale);
                canvas.height = viewport.height;
                canvas.width = viewport.width;
                // Render PDF page into canvas context
                var renderContext = {
                  canvasContext: ctx,
                  viewport: viewport
                };
                var renderTask = page.render(renderContext);
                // Wait for rendering to finish
                renderTask.promise.then(function () {
                  pageRendering = false;
                  if (pageNumPending !== null) {
                    // New page rendering is pending
                    renderPage(pageNumPending);
                    pageNumPending = null;
                  }
                });
              });
              // Update page counters
              document.getElementById('page_num').textContent = pageNum;
            }
            /**
             * If another page rendering in progress, waits until the rendering is
             * finised. Otherwise, executes rendering immediately.
             */
            function queueRenderPage(num) {
              if (pageRendering) {
                pageNumPending = num;
              } else {
                renderPage(num);
              }
            }
            /**
             * Displays previous page.
             */
            function onPrevPage() {
              if (pageNum <= 1) {
                return;
              }
              pageNum--;
              queueRenderPage(pageNum);
            }
            document.getElementById('prev').addEventListener('click', onPrevPage);
            /**
             * Displays next page.
             */
            function onNextPage() {
              if (pageNum >= pdfDoc.numPages) {
                return;
              }
              pageNum++;
              queueRenderPage(pageNum);
            }
            document.getElementById('next').addEventListener('click', onNextPage);
            /**
             * Asynchronously downloads PDF.
             */
            PDFJS.getDocument(url).then(function (pdfDoc_) {
              pdfDoc = pdfDoc_;
              document.getElementById('page_count').textContent = pdfDoc.numPages;
              // Initial/first page rendering
              renderPage(pageNum);
            });

            //The PdfRead object is a browser-aware reading device that the User will
            //manipulate to read the page. Basically, a wrapper around the PdfView object.


            var frame = document.getElementById('pdfcanvas');

            var zoom_widget = document.getElementById('pdf-page-zoom');

            // Keep track of certain values inside the most interesting nodes of the DOM
            var state = {

                    get ctop () { return frame.lastChild.offsetTop },

                    get ftop () { return frame.scrollTop },

                    get fsh () { return frame.scrollHeight },

                    get fh () { return frame.offsetHeight },
            };

            // Decrease the Zoom, acting on the scale
            this.zoomMinus = function (val) {
                doc.page.scale -= (val) ? val : 0.25;
                zoom_widget.innerText = doc.page.scale * 100;
            };

            // Increase the Zoom, acting on the scale
            this.zoomPlus = function (val) {
                doc.page.scale += (val) ? val : 0.25;
                zoom_widget.innerText = doc.page.scale * 100;
            };

            // Controller: monitor for frame scroll events and advance page rendering
            frame.onscroll = function () {
                var test = (state.fsh - (state.fh + state.ftop));
                if (test < 0 && doc.page.head < doc.page.last) {
                    doc.page.number++; 
                }
            };

            // Init the widgets
            zoom_widget.innerText = doc.page.scale * 100;

          </script>

2つを統合してビューアーにズームを追加しようとしましたが、成功していません。私のjavascriptの知識はpdf.jsの複雑さと比較してかなり限られていますが、誰かが私の問題を助けてくれるかどうか疑問に思っていました。アドバイス、指示、コードをいただければ幸いです。

13
Rizzo

申し訳ありませんが、これは古い質問であることを承知しており、おそらくあなたは今までに解決策を考え出したでしょう。ただし、以下では、ズームインボタンとズームアウトボタンが機能する非常にシンプルなPDF.jsページ(MozillaのWebページで sample をいじって作成したもの)をコード化します。

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>Simple PDF.js with zoom</title>
      <script src="pdfjs/build/pdf.js"></script>
   </head>
   <body>

      <h1>Simple PDF.js with zoom</h1>

      <button id="nextbutton" type="button">next page</button>
      <button id="prevbutton" type="button">prev page</button>
      <button id="zoominbutton" type="button">zoom in</button>
      <button id="zoomoutbutton" type="button">zoom out</button>
      <br>


      <canvas id="the-canvas" style="border:1px  solid black"></canvas>

      <script id="script">
         var pageNum = 1;
         var pdfScale = 1; // make pdfScale a global variable
         var shownPdf; // another global we'll use for the buttons
         var url = './helloworld.pdf' // PDF to load: change this to a file that exists;

         function renderPage(page) {
            var scale = pdfScale; // render with global pdfScale variable
            var viewport = page.getViewport(scale);
            var canvas = document.getElementById('the-canvas');
            var context = canvas.getContext('2d');
            canvas.height = viewport.height;
            canvas.width = viewport.width;
            var renderContext = {
               canvasContext: context,
               viewport: viewport
            };
            page.render(renderContext);
         }

         function displayPage(pdf, num) {
            pdf.getPage(num).then(function getPage(page) { renderPage(page); });
         }

         var pdfDoc = PDFJS.getDocument(url).then(function getPdfHelloWorld(pdf) {
            displayPage(pdf, 1);
            shownPdf = pdf;
         });

         var nextbutton = document.getElementById("nextbutton");
         nextbutton.onclick = function() {
            if (pageNum >= shownPdf.numPages) {
               return;
            }
            pageNum++;
            displayPage(shownPdf, pageNum);
         }

         var prevbutton = document.getElementById("prevbutton");
         prevbutton.onclick = function() {
            if (pageNum <= 1) {
               return;
            }
            pageNum--;
            displayPage(shownPdf, pageNum);
         }

         var zoominbutton = document.getElementById("zoominbutton");
         zoominbutton.onclick = function() {
            pdfScale = pdfScale + 0.25;
            displayPage(shownPdf, pageNum);
         }

         var zoomoutbutton = document.getElementById("zoomoutbutton");
         zoomoutbutton.onclick = function() {
            if (pdfScale <= 0.25) {
               return;
            }
            pdfScale = pdfScale - 0.25;
            displayPage(shownPdf, pageNum);
         }


      </script>


   </body>
</html>

申し訳ありませんが、上記のコードを調べて私のコードとの違いを確認したり、機能しないことを確認したりしていませんが、おそらくこれで必要なものが得られます。

17
frabjous

キャンバスを(任意のサイズの)ズームされたpdfの任意の領域で設定できる関数(viewport.transform)

/*
 * Load pdf page to canvas and zoom it on arbitrary region
 *
 * @url - url to pdf
 * @pageNum - which page (start from 1)
 * @width - canvas width
 * @height - canvas height
 * @zoom - zoom, 1=no zoom
 * @posX - shift pdf on x axis (in pixels)
 * @posY - shift pdf on y axis (in pixels)
 */
async function load(url,pageNum,width,height,zoom,posX,posY) {
  let pdfjs = window['pdfjs-dist/build/pdf'];
  pdfjs.GlobalWorkerOptions.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';
  let pdf = await pdfjs.getDocument(url).promise;
  let page = await pdf.getPage(pageNum);
  
  let viewport = page.getViewport({scale:1});
  let pY = viewport.transform[5]*zoom + posY;
  viewport.transform = [zoom, 0, 0, -zoom, posX, pY];
  
  let context = canvasPdf.getContext('2d');
  canvasPdf.width = width;
  canvasPdf.height = height;
  
  let renderContext = {canvasContext: context, viewport};
  var render = await page.render(renderContext).promise;
}

let url = "http://cors-anywhere.herokuapp.com/http://www.africau.edu/images/default/sample.pdf";

load(url,1,500,140,2,-140,-110);
body {background: gray }
<script src="//mozilla.github.io/pdf.js/build/pdf.js"></script>

<canvas id="canvasPdf"></canvas>
1

ズームインとズームアウトを追加したかった...

@frabjousの回答は適切です。あなたが説明したとおりの結果が得られます。私もそれをいじくり回していました、ライブデモ: http://next.plnkr.co/edit/XQBGOhdzkX3zQ86Y


より高度なものについては、これをチェックしてください: fullviewなしのmozilla pdf.js

Iframeを使用してURLをパラメーターとして渡すのは簡単に思えます!

0
Mars Robertson