javascript - Render PDF using PDF.JS and AngularJS from byte array - Stack Overflow

admin管理员组

文章数量:1392007

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:

• .html

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=".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?

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:

• http://codingcrazy87.blogspot./2014/05/view-pdf-files-directly-within-browser.html
• https://gist.github./fcingolani/3300351

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./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?

• javascript
• angularjs
• pdf
• pdf.js

Share Improve this question Follow asked Feb 11, 2015 at 18:03 Jeremy WagnerJeremy Wagner 51555 gold badges99 silver badges1919 bronze badges 3

• 1 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 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 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 Commented Feb 12, 2015 at 22:50

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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';

本文标签： javascriptRender PDF using PDFJS and AngularJS from byte arrayStack Overflow