Render PDF using PDF.JS and AngularJS from byte array

Question

I've been following the following links to try to render a byte stream returned from an API to a PDF in browser using PDF.JS:

Here is the JavaScript used to run render. Note: stream is a byte array returned from an API.

var file = new Blob([stream], {type: 'application/pdf'});
var fileURL = URL.createObjectURL(file);
$scope.renderPDF(fileURL, document.getElementById('pdf-holder'));

Here is $scope.renderPDF:

$scope.renderPDF = function(url, canvasContainer) {
    var scale= 1.5;  //"zoom" factor for the PDF

    function renderPage(page) {
        var viewport = page.getViewport(scale);
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        var renderContext = {
            canvasContext: ctx,
            viewport: viewport
        };

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

        canvasContainer.appendChild(canvas);

        page.render(renderContext);
    }

    function renderPages(pdfDoc) {
        for(var num = 1; num <= pdfDoc.numPages; num++)
            pdfDoc.getPage(num).then(renderPage);
    }

    PDFJS.disableWorker = true;
    PDFJS.getDocument(url).then(renderPages);

}

Here is the HTML in my template page:

<script type="text/javascript" src="https://cdn.rawgit.com/mozilla/pdf.js/gh-pages/build/pdf.js"></script>

<div id="pdf-holder">
</div>

When the code runs

PDFJS.getDocument(url).then(renderPages);

I get a 404 Not Found error on worker.js, which makes sense because I'm following these examples and disabling worker so I shouldn't need it. Does anyone have any advice or an easy way around this that I can render a pdf in browser from a byte stream?

By disabling worker you just disabling loading PDF parser code using Web Worker to make legacy browsers work. The parser code still needs to be loaded, in your case it will be loaded via script tag; you still need to set 'workerSrc' — async5
– async5, Commented Feb 12, 2015 at 13:15
That works. I'm now getting the error "Unhandled promise rejection" so the getDocument(url) is failing. My url is = blob:http%3A//localhost%3A9000/56cfc1c4-cd80-4284-af8b-a0bdecc163e9 Is there anything obvious that will make this fail? — Jeremy Wagner
– Jeremy Wagner, Commented Feb 12, 2015 at 14:57
PDF.js files are not located at your localhost? Try to make it work with files located on one server first. — async5
– async5, Commented Feb 12, 2015 at 22:50

BoltClock · Accepted Answer · 2015-03-04 12:03:21Z

2

You still need pdf.worker.js even if you have disabled it. Disabling it means that PDFJS will use faked workers for which it is also using the worker library. Just set it in the following way:

PDFJS.workerSrc = 'pdf.worker.js';

edited Mar 4, 2015 at 12:03

BoltClock

728k165 gold badges1.4k silver badges1.4k bronze badges

answered Feb 11, 2015 at 21:10

FlowPaper Team

5183 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jeremy Wagner Over a year ago

That works. I'm now getting the error "Unhandled promise rejection" so the getDocument(url) is failing. My url is = blob:http%3A//localhost%3A9000/56cfc1c4-cd80-4284-af8b-a0bdecc163e9 Is there anything obvious that will make this fail?

Collectives™ on Stack Overflow

Render PDF using PDF.JS and AngularJS from byte array

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related