如何显示整体PDF（不仅仅是一页）PDF.JS？


它显示一页。我想显示所有页面。一个在另一个之下，或者放置一些按钮来更改页面，甚至更好地加载PDF.JS的所有标准控件，就像在Firefox中一样。如何实现这个？

PDFJS有一个成员变量numPages，所以你只需要遍历它们。 但 重要的是要记住，在pdf.js中获取页面是异步的，因此无法保证顺序。所以你需要链接它们。你可以沿着这些方向做点什么：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
var currPage = 1; //Pages are 1-based not 0-based
var numPages = 0;
var thePDF = null;

//This is where you start
PDFJS.getDocument(url).then(function(pdf) {<!-- -->

        //Set PDFJS global object (so we can easily access in our page functions
        thePDF = pdf;

        //How many pages it has
        numPages = pdf.numPages;

        //Start with first page
        pdf.getPage( 1 ).then( handlePages );
});



function handlePages(page)
{<!-- -->
    //This gives us the page's dimensions at full scale
    var viewport = page.getViewport( 1 );

    //We'll create a canvas for each page to draw it on
    var canvas = document.createElement( "canvas" );
    canvas.style.display = "block";
    var context = canvas.getContext('2d');
    canvas.height = viewport.height;
    canvas.width = viewport.width;

    //Draw it on the canvas
    page.render({<!-- -->canvasContext: context, viewport: viewport});

    //Add it to the web page
    document.body.appendChild( canvas );

    //Move to next page
    currPage++;
    if ( thePDF !== null && currPage <= numPages )
    {<!-- -->
        thePDF.getPage( currPage ).then( handlePages );
    }
}

这是我的看法。以正确的顺序呈现所有页面并仍然异步工作。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<style>
  #pdf-viewer {<!-- -->
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.1);
    overflow: auto;
  }

  .pdf-page-canvas {<!-- -->
    display: block;
    margin: 5px auto;
    border: 1px solid rgba(0, 0, 0, 0.2);
  }
</style>

<script>  
    url = 'https://github.com/mozilla/pdf.js/blob/master/test/pdfs/tracemonkey.pdf';
    var thePdf = null;
    var scale = 1;

    PDFJS.getDocument(url).promise.then(function(pdf) {<!-- -->
        thePdf = pdf;
        viewer = document.getElementById('pdf-viewer');

        for(page = 1; page <= pdf.numPages; page++) {<!-- -->
          canvas = document.createElement("canvas");    
          canvas.className = 'pdf-page-canvas';        
          viewer.appendChild(canvas);            
          renderPage(page, canvas);
        }
    });

    function renderPage(pageNumber, canvas) {<!-- -->
        thePdf.getPage(pageNumber).then(function(page) {<!-- -->
          viewport = page.getViewport(scale);
          canvas.height = viewport.height;
          canvas.width = viewport.width;          
          page.render({<!-- -->canvasContext: canvas.getContext('2d'), viewport: viewport});
    });
    }
</script>

<div id='pdf-viewer'></div>

Pdfjs-dist库包含用于构建PDF viewer的部分。您可以使用PDFPageView呈现所有页面。基于 https://github.com/mozilla/pdf.js/blob/master/examples/components/pageviewer.html ：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
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;
});
1
2
3
#container > *:not(:first-child) {<!-- -->
  border-top: solid 1px black;
}
1
2
3
4
5
6
<link href="https://npmcdn.com/pdfjs-dist/web/pdf_viewer.css" rel="stylesheet"/>
<script src="//i2.wp.com/npmcdn.com/pdfjs-dist/web/compatibility.js"></script>
<script src="//i2.wp.com/npmcdn.com/pdfjs-dist/build/pdf.js"></script>
<script src="//i2.wp.com/npmcdn.com/pdfjs-dist/web/pdf_viewer.js"></script>

<div id="container" class="pdfViewer singlePageView"></div>

如果你想在不同的画布中渲染pdf文档的所有页面，所有这些页面都是同步的，这是一种解决方案：

index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>PDF Sample</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="pdf.js"></script>
    <script type="text/javascript" src="main.js">
    </script>
    <link rel="stylesheet" type="text/css" href="main.css">
</head>
<body id="body">  
</body>
</html>

main.css

1
2
3
canvas {<!-- -->
    display: block;
}

main.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
$(function() {<!-- -->  
    var filePath = "document.pdf";

    function Num(num) {<!-- -->
        var num = num;

        return function () {<!-- -->
            return num;
        }
    };

    function renderPDF(url, canvasContainer, options) {<!-- -->
        var options = options || {<!-- -->
                scale: 1.5
            },          
            func,
            pdfDoc,
            def = $.Deferred(),
            promise = $.Deferred().resolve().promise(),        
            width,
            height,
            makeRunner = function(func, args) {<!-- -->
                return function() {<!-- -->
                    return func.call(null, args);
                };
            };

        function renderPage(num) {<!-- -->          
            var def = $.Deferred(),
                currPageNum = new Num(num);
            pdfDoc.getPage(currPageNum()).then(function(page) {<!-- -->
                var viewport = page.getViewport(options.scale);
                var canvas = document.createElement('canvas');
                var ctx = canvas.getContext('2d');
                var renderContext = {<!-- -->
                    canvasContext: ctx,
                    viewport: viewport
                };

                if(currPageNum() === 1) {<!-- -->                  
                    height = viewport.height;
                    width = viewport.width;
                }

                canvas.height = height;
                canvas.width = width;

                canvasContainer.appendChild(canvas);

                page.render(renderContext).then(function() {<!-- -->                                        
                    def.resolve();
                });
            })

            return def.promise();
        }

        function renderPages(data) {<!-- -->
            pdfDoc = data;

            var pagesCount = pdfDoc.numPages;
            for (var i = 1; i <= pagesCount; i++) {<!-- -->
                func = renderPage;
                promise = promise.then(makeRunner(func, i));
            }
        }

        PDFJS.disableWorker = true;
        PDFJS.getDocument(url).then(renderPages);      
    };

    var body = document.getElementById("body");
    renderPDF(filePath, body);
});