it-swarm.com.de

Wie wird das Ganze angezeigt? PDF (nicht nur eine Seite) mit PDF.JS?

Ich habe diese Demo erstellt:

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

Es wird eine Seite angezeigt. Ich möchte alle Seiten anzeigen. Einer unter dem anderen, oder platzieren Sie einige Schaltflächen, um die Seite zu wechseln oder sogar alle Standardsteuerelemente von PDF.JS wie in Firefox zu laden. Wie kann man das erreichen?

20

PDFJS hat eine Membervariable numPages, Sie müssen also nur durchlaufen.ABEREs ist wichtig zu wissen, dass das Abrufen einer Seite in pdf.js asynchron ist, sodass die Reihenfolge nicht garantiert werden kann. Sie müssten sie also ketten. Sie könnten etwas in dieser Richtung tun:

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 );
    }
}
46
Don Rhummy

Hier ist mein Take. Rendert alle Seiten in der richtigen Reihenfolge und arbeitet trotzdem asynchron.

<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>
9
Reto Höhener

Die pdfjs-dist-Bibliothek enthält Teile zum Erstellen von PDF -Anzeigen. Sie können PDFPageView verwenden, um alle Seiten zu rendern. Basierend auf 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>

7
async5

Wenn Sie alle Seiten eines PDF-Dokuments in verschiedenen Leinwänden rendern möchten, ist dies eine Art Lösung:

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

Die folgende Antwort ist eine Teilantwort , die auf alle Personen abzielt, die versuchen, eine PDF.js-Datei zu erstellen, um 2019 eine ganze PDF) anzuzeigen Dies war natürlich das Hauptanliegen des OP. Inspirationsbeispielcode

Bitte beachten Sie Folgendes:

  • es werden zusätzliche Bibliotheken verwendet - Lodash (für range () -Funktion) und Polyfills (für Versprechungen) ....
  • Bootstrap wird verwendet
    <div class="row">
        <div class="col-md-10 col-md-offset-1">
            <div id="wrapper">

            </div>
        </div>
    </div>

    <style>
        body {
            background-color: #808080;
            /* margin: 0; padding: 0; */
        }
    </style>    
    <link href="//cdnjs.cloudflare.com/ajax/libs/pdf.js/2.1.266/pdf_viewer.css" rel="stylesheet"/>    

    <script src="//cdnjs.cloudflare.com/ajax/libs/pdf.js/2.1.266/pdf.js"></script>    
    <script src="//cdnjs.cloudflare.com/ajax/libs/pdf.js/2.1.266/pdf_viewer.js"></script>
    <script src="//cdn.polyfill.io/v2/polyfill.min.js"></script>    
    <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.js"></script>
    <script>
        $(document).ready(function () {
            // startup
        });

        'use strict';

        if (!pdfjsLib.getDocument || !pdfjsViewer.PDFViewer) {
            alert("Please build the pdfjs-dist library using\n" +
                "  `gulp dist-install`");
        }

        var url = '//www.pdf995.com/samples/pdf.pdf';

        pdfjsLib.GlobalWorkerOptions.workerSrc =
            '//cdnjs.cloudflare.com/ajax/libs/pdf.js/2.1.266/pdf.worker.js';

        var loadingTask = pdfjsLib.getDocument(url);
        loadingTask.promise.then(function(pdf) {
            // please be aware this uses .range() function from lodash
            var pagePromises = _.range(1, pdf.numPages).map(function(number) {
                return pdf.getPage(number);
            });
            return Promise.all(pagePromises);
        }).then(function(pages) {
                var scale = 1.5;
                var canvases = pages.forEach(function(page) {
                    var viewport = page.getViewport({ scale: scale, }); // Prepare canvas using PDF page dimensions

                    var canvas = document.createElement('canvas');
                    canvas.height = viewport.height;
                    canvas.width = viewport.width; // Render PDF page into canvas context

                    var canvasContext = canvas.getContext('2d');
                    var renderContext = {
                        canvasContext: canvasContext,
                        viewport: viewport
                    };
                    page.render(renderContext).promise.then(function() {
                        if (false)
                            return console.log('Page rendered');
                    });
                    document.getElementById('wrapper').appendChild(canvas);
                });
            },
            function(error) {
                return console.log('Error', error);
            });
    </script>
0
petrosmm

Wenn Sie alle Seiten eines PDF-Dokuments in verschiedenen Leinwänden rendern möchten

<html>
   <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="pdf.js"></script>
      <script src="jquery.js"></script>
   </head>
   <body>
      <h1>PDF.js 'Hello, world!' example</h1>
      <div id="canvas_div"></div>
      <body>
         <script>
            // If absolute URL from the remote server is provided, configure the CORS
            // header on that server.
            var url = 'pdff.pdf';          
            // Loaded via <script> tag, create shortcut to access PDF.js exports.
            var pdfjsLib = window['pdfjs-dist/build/pdf'];            
            // The workerSrc property shall be specified.
            pdfjsLib.GlobalWorkerOptions.workerSrc = 'worker.js';
            var loadingTask = pdfjsLib.getDocument(url);
                loadingTask.promise.then(function(pdf) {
					 var __TOTAL_PAGES = pdf.numPages; 
					  // Fetch the first page
					  var pageNumber = 1;			  
					for( let i=1; i<=__TOTAL_PAGES; i+=1){
						var id ='the-canvas'+i;
						$('#canvas_div').append("<div style='background-color:gray;text-align: center;padding:20px;' ><canvas calss='the-canvas' id='"+id+"'></canvas></div>");				
						  var canvas = document.getElementById(id);
						  //var pageNumber = 1;
						  renderPage(canvas, pdf, pageNumber++, function pageRenderingComplete() {
							if (pageNumber > pdf.numPages) {
							  return; 
							}
							// Continue rendering of the next page
							renderPage(canvas, pdf, pageNumber++, pageRenderingComplete);
						  });				
					}            	  
                });           
                function renderPage(canvas, pdf, pageNumber, callback) {
                  pdf.getPage(pageNumber).then(function(page) {
                    var scale = 1.5;
                    var viewport = page.getViewport({scale: scale});            
                    var pageDisplayWidth = viewport.width;
                    var pageDisplayHeight = viewport.height;
            		//var pageDivHolder = document.createElement();
                    // Prepare canvas using PDF page dimensions
                    //var canvas = document.createElement(id);
                    var context = canvas.getContext('2d');
                    canvas.width = pageDisplayWidth;
                    canvas.height = pageDisplayHeight;
                   // pageDivHolder.appendChild(canvas);           
                    // Render PDF page into canvas context
                    var renderContext = {
                      canvasContext: context,
                      viewport: viewport
                    };
                    page.render(renderContext).promise.then(callback);
                  });
                }           
         </script>
         <html>

0
parmod