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

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 some buttons to change page or even better load all standard controls of PDF.JS like in Firefox. How to acomplish this?

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

mozilla/pdf.js, i need to render all pages of a pdf file in the first time without scrolling /how-to-​display-whole-pdf-not-only-one-page-with-pdf-js/41174415#  To page through the document, click the screen displaying the page in Full Screen mode. Choose View > Full Screen Mode. Do any of the following: To go to the next page, press the Enter, Page Down, Down Arrow, or the Right Arrow key.

Here's my take. Renders all pages in correct order and still works asynchronously.

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

How to render a full PDF using Mozilla's pdf.js · GitHub, really dirty! this is just a test drive ;) --> Using this snippet the pages of my PDF are not rendering in chronogical order, the first page that is ready is rendering  Please note that PDF.JS is just a PDF viewer and not a PDF editor. It is not a library to create PDF files. PDF.JS is used by Firefox internally to display PDF files. In fact PDF.JS is so good that even Opera decided to use it. Example — Displaying PDF in a div Container. Click on the below button to display this PDF file. Show PDF

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

How to render a full PDF using Mozilla's pdf.js, <html> <body> <!-- really dirty! this is just a test drive ;) --> <script type="text/​javascript" src="https://raw.github.com/mozilla/pdf.js/gh-pages/build/pdf.js"></​script>  Generally, a hyperlink is used to link a PDF document to display in the browser. An HTML anchor link is the easiest way to display a PDF file. But if you want to display a PDF document on the web page, PDF file needs to be embedded in HTML. The HTML <embed> tag is the best option to embed PDF document on the web page.

If you want to render all pages of pdf document in different canvases, all one by one synchronously this is kind of solution:

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

Rendering PDF Files in the Browser with PDF.js, A quick overview of how to use PDF.js, created by Mozilla, to show PDFs on your it has cross-browser compatibility and does not require additional plugins to be a specific page of a PDF into a <canvas> element, we can use the display layer​. We first extract all the files in the downloaded copy of PDF.js, but we currently  When opening a PDF document a page, other than the first page, is displayed as the default page. For example a PDF document with three pages would open on the second page. Solution. I’ve seen this issue when a page has been inserted into an existing PDF document, for example a two page PDF had another page inserted as the first page.

Implement a Simple PDF Viewer with PDF.js, An example of how to implement a minimal PDF viewer with Mozilla's PDF.js. to build a simple custom PDF viewer to display PDF documents on a page. we can not only build an application that can render a PDF document with one or  Custom viewer is used to display SVG. (FWIW SVG rendering is not supported yet) Also looks like the custom viewer displays only first page, so it's not an issue. It is hard to address the issue unless minimal example will be published that shows defect with PDF.js. The steps to reproduce are not clear as well.

Examples, This tutorial shows how PDF.js can be used as a library in a web browser. Each PDF page has its own viewport which defines the size in pixels(72DPI) and initial By default the viewport is scaled to the original size of the PDF, but this can be The same canvas cannot be used to perform to draw two pages at the same  I tried rendering PDF document using pdf.js library. I know only basics in javascript and I am new to promises, so at first I followed advice on this page: Render .pdf to single Canvas using pdf.js

Custom PDF Rendering in JavaScript with Mozilla's PDF.Js, Imran Latif introduces PDF.js as a flexible solution for custom PDF rendering with JavaScript. button, or display only few pages while others require paid membership. But parsing and rendering PDF is not a simple task. How to Display One Page at a Time in Microsoft Word at Any Resolution By Paul Ferson / Sep 9, 2015 / Software Hacks There was a point in the not-too-distant past where monitors were not nearly as high-resolution as they are now.

View PDF files in Firefox or choose another viewer, Firefox includes a built-in PDF viewer to display PDF files inside the browser window. on the far left will open a sidebar with thumbnails of the document's pages. files, the PDF Viewer may have problems displaying fonts, colors or the whole built-in PDF viewer as the default for viewing PDFs in the browser but open  I will mention one "quick and dirty" workaround that often works: select the entire page (Ctrl+a) and then print just the selection (Ctrl+p to call up the print dialog directly, then click Selection). This usually gets the whole content, but the page breaks are messy and fixed elements may overlay the content.

Comments
  • github.com/mozilla/pdf.js
  • Take inspiration here: mozilla.github.io/pdf.js/web/viewer.html
  • @DekDekku kuncajs I was reading those sites for all day today before i asked this question. They didnt help
  • @tomaszs why have you not marked this as answered?
  • You will get your questions answered with this solution! stackoverflow.com/questions/25162554/…
  • this doesn't work for me. My canvas is inside of a div and when run above code it shows the pdf pages on top of each other at the end of the page (not div)
  • @Sara you need to learn DOM. the above code is an example only. it appends the created pages to the document. you need to put them in your div and style the canvases as needed in your project. but all that is outside the scope of this question
  • Thanks for quick response:) I added div and it adds the canvas to the right place but it overwrite them..
  • @Mr.Hyde i haven't looked at this project in years. it's very likely the api has methods to help with that but you can still use canvas and listen to mouse events to implement text selection.
  • perfect solution
  • Brilliant - Thank you!
  • Simple and clean. Made it scale = 2 for web.
  • Thank you, for giving working code snippet as I needed.