pdfjs to img/canvas, only works in FireFox

Question

I use the pdf.js library to make a image/canvas from a PDF page on a client. But it will only work on FireFox not on Chrome or IE10+. I've looked around but cant find a good answer or solution.

I read that pdf.js on IE or Chrome needs a web-server but when i try the code on JSFiddle it still doesn't work.

Here is a example: https://jsfiddle.net/aqxwsfjo/2/

var url = 'https://raw.githubusercontent.com/mozilla/pdf.js/master/examples/helloworld/helloworld.pdf';

PDFJS.disableWorker = true;

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

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


        var canvas = document.getElementById('the-canvas');
        var context = canvas.getContext('2d');
        canvas.height = viewport.height;
        canvas.width = viewport.width;

        page.render({canvasContext: context, viewport: viewport})


    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/mozilla/pdf.js/master/web/compatibility.js"></script>
<script src="https://raw.githubusercontent.com/mozilla/pdf.js/gh-pages/build/pdf.js"></script>


<canvas id="the-canvas" style="border:1px solid black"></canvas>

score 0 · Accepted Answer · edited May 23 '17 at 11:46

As it seems GitHub added header X-Content-Type-Options: nosniff when returning raw files with Content-Type: text/plain. See related question: Link and execute external JavaScript file hosted on GitHub

As stated in the related question solution would be to replace https://raw.githubusercontent.com with https://rawgit.com/ which returns the files with the correct content type.

here is updated fiddle: https://jsfiddle.net/aqxwsfjo/4/

pdfjs to img/canvas, only works in FireFox

1 Answers1