如何用PDF.JS显示整个PDF（不仅仅是一页）？ [英] How to display whole PDF (not only one page) with PDF.JS?

问题描述

我创建了这个演示：

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

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

It displays one page. I would like to display all pages. One below another, or place some buttons to change page or even better load all standard controls of PDF.JS like in Firefox. How to acomplish this?

推荐答案

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

PDFJS has a member variable numPages, so you'd just iterate through them. BUT it's important to remember that getting a page in pdf.js is asynchronous, so the order wouldn't be guaranteed. So you'd need to chain them. You could do something along these lines:

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

这篇关于如何用PDF.JS显示整个PDF（不仅仅是一页）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！