使用字节数组中的 PDF.JS 和 AngularJS 渲染 PDF

Question

我一直在关注以下链接，尝试使用 PDF.JS 将从 API 返回的字节流呈现为浏览器中的 PDF：

这是用于运行渲染的 JavaScript。 注意： stream 是从 API.

返回的字节数组

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

这里是$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);

}

这是我的模板页面中的HTML：

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

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

当代码运行s

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

我在 worker.js 上收到 404 Not Found 错误，这是有道理的，因为我正在遵循这些示例并禁用工作人员，所以我不需要它。有没有人有任何建议或简单的方法来解决这个问题，我可以从字节流在浏览器中呈现 pdf？

Answer 1

即使您已禁用它，您仍然需要 pdf.worker.js。禁用它意味着 PDFJS 将使用伪造的工人，它也为此使用工人库。只需按以下方式设置即可：

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

使用字节数组中的 PDF.JS 和 AngularJS 渲染 PDF

Render PDF using PDF.JS and AngularJS from byte array

javascript

pdf

angularjs

pdf.js