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

傷城~ 2021-07-04 17:50 421阅读 0赞

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

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

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

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

#container > *:not(:first-child) { 
      border-top: solid 1px black; 
    }

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

index.html

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

canvas { 
        display: block;
    }

main.js

$(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);
    });