How to display whole PDF (not only one page) with PDF.JS?

前端 未结 6 1701
无人及你
无人及你 2020-12-24 05:42

I\'ve created this demo:

http://polishwords.com.pl/dev/pdfjs/test.html

It displays one page. I would like to display all pages. One below another, or place s

6条回答
  •  自闭症患者
    2020-12-24 06:12

    The pdfjs-dist library contains parts for building PDF viewer. You can use PDFPageView to render all pages. Based on https://github.com/mozilla/pdf.js/blob/master/examples/components/pageviewer.html :

    var url = "https://cdn.mozilla.net/pdfjs/tracemonkey.pdf";
    var container = document.getElementById('container');
    // Load document
    PDFJS.getDocument(url).then(function (doc) {
      var promise = Promise.resolve();
      for (var i = 0; i < doc.numPages; i++) {
        // One-by-one load pages
        promise = promise.then(function (id) {
          return doc.getPage(id + 1).then(function (pdfPage) {
    // Add div with page view.
    var SCALE = 1.0; 
    var pdfPageView = new PDFJS.PDFPageView({
          container: container,
          id: id,
          scale: SCALE,
          defaultViewport: pdfPage.getViewport(SCALE),
          // We can enable text/annotations layers, if needed
          textLayerFactory: new PDFJS.DefaultTextLayerFactory(),
          annotationLayerFactory: new PDFJS.DefaultAnnotationLayerFactory()
        });
        // Associates the actual page with the view, and drawing it
        pdfPageView.setPdfPage(pdfPage);
        return pdfPageView.draw();        
          });
        }.bind(null, i));
      }
      return promise;
    });
    #container > *:not(:first-child) {
      border-top: solid 1px black; 
    }
    
    
    
    
    
    

提交回复
热议问题