Увеличьте простой просмотрщик pdf.js

Question

Я начал создавать PDF-просмотрщик с помощью библиотеки pdf.js. Мне очень понравилось, как просто некоторые из примеров, так я использовал Предыдущий/Следующий пример, чтобы начать с моего зрителя:

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

Я хотел бы добавить, увеличивать и уменьшать масштаб и нашел этот простой просмотрщик, который я хотел модель мой масштаб и прокручивать прочь:

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

Вот мой HTML для моего index.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> 

, и это мой Javascript для моего 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> 

Я попытался объединить два и добавить масштабирование к моему зрителю, но я, не имея каких-либо успехов. Мои знания javascript довольно ограничены по сравнению со сложностью pdf.js, но мне было интересно, может ли кто-нибудь помочь мне с моей проблемой. любые советы, руководство, код будут оценены.

Answer 1

Извините, я знаю, что это старый вопрос, и вы наверняка придумали решение. Ниже, однако, вы будете писать для очень простой страницы PDF.js (которую я сделал, переделав sample на веб-странице Mozilla) с кнопками масштабирования и уменьшения масштаба.

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

К сожалению, я не выяснен код выше, чтобы увидеть, как она отличается от моей, или определить, что о нем не работает, но, возможно, это даст вам то, что вам нужно.