如何使用PDF.JS显示整个PDF（不只一页）？

我创建这个演示：如何使用PDF.JS显示整个PDF（不只一页）？

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

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

来源

2013-05-10 Tomasz Smykowski

https://github.com/mozilla/pdf.js – 2013-05-10 10:43:58

汲取灵感在这里： http://mozilla.github.io/pdf.js/web/viewer.html – kuncajs 2013-05-10 11:06:00

@DekDekku kuncajs我在我问这个问题之前，今天整天阅读这些网站。他们没有帮助 – 2013-05-10 17:09:35

PDFJS有一个成员变量numPages，所以你只需要遍历它们。但是请务必记住，在pdf.js中获取页面是异步的，所以顺序不能保证。所以你需要链接它们。你可以做一些沿着这些路线：

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

来源

2013-09-30 16:28:18

这不适合我。我的画布是在一个div里面，当在代码上面运行时，它显示了页面顶部的pdf页面（不是div） – Sara 2015-02-04 04:12:41

@Sara你需要学习DOM。上面的代码仅仅是一个例子。它会将创建的页面追加到文档中。您需要将它们放入您的div中，并根据需要在您的项目中设置画布的样式。但这一切都超出了这个问题的范围 – 2015-02-04 05:02:06

感谢您的快速响应:)我添加了div，它将画布添加到了正确的位置，但它覆盖了它们。 – Sara 2015-02-04 05:12:25

如果你想呈现在画布上不同的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); 
});

来源

2014-06-06 00:19:31

这个canvasContainer从哪里来？你能解释我有动态的div里面的页面加载页面后点击regedve链接 – 2017-03-06 15:18:22

将添加画布我使用TouchPDF库 – 2017-03-06 15:26:12

您可以参考下面的链接快速解决方法。

注：开发者本身提到的（！实在太脏了，这只是一个测试驱动）

https://gist.github.com/fcingolani/3300351#file-index-html

来源

2016-12-10 17:42:18 VVL

的pdfjs - 距离库包括用于创建PDF浏览器部分。您可以使用PDFPageView来渲染所有页面。基于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; 
 
}

<link href="https://npmcdn.com/pdfjs-dist/web/pdf_viewer.css" rel="stylesheet"/> 
 
<script src="https://npmcdn.com/pdfjs-dist/web/compatibility.js"></script> 
 
<script src="https://npmcdn.com/pdfjs-dist/build/pdf.js"></script> 
 
<script src="https://npmcdn.com/pdfjs-dist/web/pdf_viewer.js"></script> 
 

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

来源

2016-12-15 22:32:32 async5

谢谢你，因为我需要给工作代码片段。 – Gathole 2017-07-18 06:15:01

这是我服用。以正确的顺序渲染所有页面，并仍然异步工作。

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

来源

2017-10-09 19:44:58 Zalumon

辉煌 - 谢谢！ – 2017-12-14 19:55:25

如何使用PDF.JS显示整个PDF（不只一页）？

回答

相关问题