javascript 如何使用 pdf.js 库渲染整个 pdf 文档？

How to render whole pdf document using pdf.js library?

提问by user3913960

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 and ImageData(2. answer).
But as a result, I rendered my document with all pages blank. All pictures and colors are fine, but not even a line of text. I also tried some other tutorials, but either I get the same result, or the document is completely missing. Right now, my code looks like this: (It's almost identical to the tutorial)

我尝试使用 pdf.js 库渲染 PDF 文档。我只知道 javascript 中的基础知识，而且我是 promise 的新手，所以起初我遵循了这个页面上的建议：使用 pdf.js 和 ImageData 将 .pdf 渲染到单个画布（2. 答案）。
但结果是，我将所有页面都呈现为空白的文档。所有的图片和颜色都很好，但连一行文字都没有。我还尝试了一些其他教程，但要么得到相同的结果，要么文档完全丢失。现在，我的代码是这样的：（和教程几乎一样）

function loadPDFJS(pid, pageUrl){

    PDFJS.disableWorker = true;
    PDFJS.workerSrc = 'pdfjs/build/pdf.worker.js';

    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    var pages = [];
    var currentPage = 1;

    var url = '/search/nimg/IMG_FULL/' + pid + '#page=1';

    PDFJS.getDocument(url).then(function (pdf) {

        if(currentPage <= pdf.numPages) getPage();

        function getPage() {
            pdf.getPage(currentPage).then(function(page){
                var scale = 1.5;
                var viewport = page.getViewport(scale);

                canvas.height = viewport.height;
                canvas.width = viewport.width;

                var renderContext = {
                    canvasContext: ctx,
                    viewport: viewport
                };

                page.render(renderContext).then(function() {
                    pages.push(canvas.toDataURL());
                    if(currentPage < pdf.numPages) {
                        currentPage++;
                        getPage();
                    } else {
                        done();
                    }
                });
            });
        }
    });

    function done() {
        for(var i = 0; i < pages.length; i++){
            drawPage(i, addPage);
        }
    }

    function addPage(img){
        document.body.appendChild(img);
    }

    function drawPage(index, callback){
        var img = new Image;
        img.onload = function() {
            ctx.drawImage(this, 0, 0, ctx.canvas.width, ctx.canvas.height);
            callback(this);
        }
        img.src = pages[index];
    }
}

采纳答案by user3913960

K so I just looked at my code again and I started all over. I made it simpler and I finally got it to work. Now it looks like this:

K 所以我只是再次查看了我的代码，然后从头开始。我让它变得更简单，我终于让它工作了。现在它看起来像这样：

var canvasContainer = document.getElementById('pdfImageImg');
function loadPDFJS(pid, pageUrl){

    PDFJS.workerSrc = 'pdfjs/build/pdf.worker.js';

    var currentPage = 1;
    var pages = [];
    var url = '/search/nimg/IMG_FULL/' + pid + '#page=1';

    PDFJS.getDocument(url).then(function(pdf) {
            pdf.getPage(currentPage).then(renderPage);

    function renderPage(page) {
        var height = 700;
        var viewport = page.getViewport(1);
        var scale = height / viewport.height;
        var scaledViewport = page.getViewport(scale);

        var canvas = document.createElement('canvas');
        var context = canvas.getContext('2d');
        canvas.height = scaledViewport.height;
        canvas.width = scaledViewport.width;

        var renderContext = {
            canvasContext: context,
            viewport: scaledViewport
        };
        page.render(renderContext).then(function () {
            if(currentPage < pdf.numPages) {
                pages[currentPage] = canvas;
                currentPage++;
                pdf.getPage(currentPage).then(renderPage);
            } else {
                for (var i = 1; i < pages.length; i++) {
                    document.getElementById('pdfImageImg').appendChild(pages[i]);
                }
            }
        });
    }

    });
}

回答by Mr_Green

Thank you @user3913960, your concept worked for me. I found some issues in your code which I fixed. Here is the code:

谢谢@user3913960，你的概念对我有用。我在你的代码中发现了一些我修复的问题。这是代码：

function loadPDFJS(pageUrl) {
    PDFJS.workerSrc = 'resources/js/pdfjs/pdf.worker.js';
    var currentPage = 1;
    var pages = [];
    var globalPdf = null;
    var container = document.getElementById('pdf-container');
    function renderPage(page) {
        //
        // Prepare canvas using PDF page dimensions
        //
        var canvas = document.createElement('canvas');
        // Link: http://stackoverflow.com/a/13039183/1577396
        // Canvas width should be set to the window's width for appropriate
        // scaling factor of the document with respect to the canvas width
        var viewport = page.getViewport(window.screen.width / page.getViewport(1.0).width);
        // append the created canvas to the container
        container.appendChild(canvas);
        // Get context of the canvas
        var context = canvas.getContext('2d');
        canvas.height = viewport.height;
        canvas.width = viewport.width;
        //
        // Render PDF page into canvas context
        //
        var renderContext = {
            canvasContext: context,
            viewport: viewport
        };
        page.render(renderContext).then(function () {
            if (currentPage < globalPdf.numPages) {
                pages[currentPage] = canvas;
                currentPage++;
                globalPdf.getPage(currentPage).then(renderPage);
            } else {
                // Callback function here, which will trigger when all pages are loaded
            }
        });
    }
    PDFJS.getDocument(pageUrl).then(function (pdf) {
        if(!globalPdf){
            globalPdf = pdf;
        }
        pdf.getPage(currentPage).then(renderPage);
    });
}
loadPDFJS("somepdffilenamehere.pdf");

回答by async5

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:

pdfjs-dist 库包含用于构建 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>

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

另请参阅如何使用 PDF.JS 显示整个 PDF（不仅仅是一页）？

回答by Hamzeen Hameem

I have used below code to render a pdf with multiple pages.

我使用下面的代码来呈现多页的 pdf。

PDFJS.disableWorker = true; // due to CORS
var canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d'),
pages = [],
currentPage = 1,
url = 'your_pdf.pdf';

PDFJS.getDocument(url).then(function(pdf) {
  if (currentPage <= pdf.numPages) getPage();

  // main entry point/function for loop
  function getPage() {
    // when promise is returned do as usual
    pdf.getPage(currentPage).then(function(page) {
      var scale = 1;
      var viewport = page.getViewport(scale);
      canvas.height = viewport.height;
      canvas.width = viewport.width;

      var renderContext = {
        canvasContext: ctx,
        viewport: viewport
      };

      // now, tap into the returned promise from render:
      page.render(renderContext).then(function() {
        // store compressed image data in array
        pages.push(canvas.toDataURL());

        if (currentPage < pdf.numPages) {
          currentPage++;
          getPage(); // get next page
        } else {
          // after all the pages are parsed
          for (var i = 0; i < pages.length; i++) {
            drawPage(i);
          }
        }
      });
    });
  }
});

function drawPage(index, callback) {
  var img = new Image;
  img.onload = function() {
    ctx.drawImage(this, 0, 0, ctx.canvas.width, ctx.canvas.height);
    if (index > 0) img.style.display = 'inline-block';
    document.body.appendChild(img);
  }
  img.src = pages[index]; // start loading the data-uri as source
}