13

I would like to generate a thumbnail from a pdf file using PDF.js, but it isn't like anothers js that have just one file and all needed to include the js in your project is to write:

<script src="any.js"></script>

How can I use PDF.js in my project? I'm using PHP in backend.

Andre Alvim
  • 339
  • 1
  • 3
  • 12
  • Did you try this solution ? https://stackoverflow.com/questions/467793/how-do-i-convert-a-pdf-document-to-a-preview-image-in-php – Antoine Bourlart Jun 14 '17 at 14:36
  • Example of a an Angular 10 Service using PDF.js to create thumbnail. https://stackoverflow.com/questions/49548288/how-to-use-pdf-js-in-angular-2-4-5/63982049#63982049 – ttugates Sep 21 '20 at 13:35

2 Answers2

25

Based on helloworld example:

function makeThumb(page) {
  // draw page to fit into 96x96 canvas
  var vp = page.getViewport(1);
  var canvas = document.createElement("canvas");
  canvas.width = canvas.height = 96;
  var scale = Math.min(canvas.width / vp.width, canvas.height / vp.height);
  return page.render({canvasContext: canvas.getContext("2d"), viewport: page.getViewport(scale)}).promise.then(function () {
    return canvas;
  });
}

pdfjsLib.getDocument("https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf").promise.then(function (doc) {
  var pages = []; while (pages.length < doc.numPages) pages.push(pages.length + 1);
  return Promise.all(pages.map(function (num) {
    // create a div for each page and build a small canvas for it
    var div = document.createElement("div");
    document.body.appendChild(div);
    return doc.getPage(num).then(makeThumb)
      .then(function (canvas) {
        div.appendChild(canvas);
    });
  }));
}).catch(console.error);
<script src="//npmcdn.com/pdfjs-dist/build/pdf.js"></script>
C02
  • 156
  • 13
async5
  • 2,505
  • 1
  • 20
  • 27
  • Thanks man, but I have tried with another URL (http://www.shellgreenier.com/MGreenier-Resume.pdf) and got this problem: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access. – Andre Alvim Jun 14 '17 at 17:56
  • 1
    cdn.mozilla.net has CORS enabled -- you cannot ask random URL to provide data for the different web site. download PDF and code on your web site to play with the script. see also https://github.com/mozilla/pdf.js/wiki/Frequently-Asked-Questions#faq-xhr – async5 Jun 14 '17 at 18:29
  • https://stackoverflow.com/questions/49644356/image-appending-is-not-working-for-thumbnail-in-pdf-js could u pls help me in this issue – Vishnu Apr 04 '18 at 06:41
  • 2
    @async5: Code snippet error: `"message": "Uncaught ReferenceError: PDFJS is not defined",` do you think you can modify your answer/runnable snippet? Thank you in advance. – Basj Oct 30 '18 at 13:42
5

I figured it out, the scale is not a parameter. The parameters are an object with field of scale that needed to be set.

function makeThumb(page) {
    // draw page to fit into 96x96 canvas
    var vp = page.getViewport({ scale: 1, });
    var canvas = document.createElement("canvas");
    var scalesize = 1;
    canvas.width = vp.width * scalesize;
    canvas.height = vp.height * scalesize;
    var scale = Math.min(canvas.width / vp.width, canvas.height / vp.height);
    console.log(vp.width, vp.height, scale);
    return page.render({ canvasContext: canvas.getContext("2d"), viewport: page.getViewport({ scale: scale }) }).promise.then(function () {
        return canvas; 
    });
}
Glen L
  • 101
  • 1
  • 2
  • This is not a separate answer. The options being an object is a change that was introduced in version 2.1 and all you needed to do was _edit_ [async5's answer](https://stackoverflow.com/a/44548566/3791358). You don't even mention their original answer or that yours should be a fix to theirs. – Gust van de Wal Mar 15 '22 at 09:08