如何使用 pdf.js 库渲染整个 pdf 文档?

2023-11-27

我尝试使用 pdf.js 库渲染 PDF 文档。我只了解 javascript 的基础知识,而且我对 Promise 还很陌生,所以一开始我遵循了此页面上的建议:使用 pdf.js 和 ImageData 将 .pdf 渲染到单个 Canvas(2.回答)。
但结果是,我的文档所有页面都是空白的。所有的图片和颜色都很好,但连一行文字都没有。我还尝试了其他一些教程,但要么得到相同的结果,要么文档完全丢失。 现在,我的代码如下所示:(与教程几乎相同)

function loadPDFJS(pid, pageUrl){

    PDFJS.disableWorker = true;
    PDFJS.workerSrc = 'pdfjs/build/pdf.worker.js';

    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    var pages = [];
    var currentPage = 1;

    var url = '/search/nimg/IMG_FULL/' + pid + '#page=1';

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

        if(currentPage <= pdf.numPages) getPage();

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

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

                var renderContext = {
                    canvasContext: ctx,
                    viewport: viewport
                };

                page.render(renderContext).then(function() {
                    pages.push(canvas.toDataURL());
                    if(currentPage < pdf.numPages) {
                        currentPage++;
                        getPage();
                    } else {
                        done();
                    }
                });
            });
        }
    });

    function done() {
        for(var i = 0; i < pages.length; i++){
            drawPage(i, addPage);
        }
    }

    function addPage(img){
        document.body.appendChild(img);
    }

    function drawPage(index, callback){
        var img = new Image;
        img.onload = function() {
            ctx.drawImage(this, 0, 0, ctx.canvas.width, ctx.canvas.height);
            callback(this);
        }
        img.src = pages[index];
    }
}

K 所以我再次查看了我的代码,然后重新开始。我把它变得更简单,我终于让它工作了。现在看起来像这样:

var canvasContainer = document.getElementById('pdfImageImg');
function loadPDFJS(pid, pageUrl){

    PDFJS.workerSrc = 'pdfjs/build/pdf.worker.js';

    var currentPage = 1;
    var pages = [];
    var url = '/search/nimg/IMG_FULL/' + pid + '#page=1';

    PDFJS.getDocument(url).then(function(pdf) {
            pdf.getPage(currentPage).then(renderPage);

    function renderPage(page) {
        var height = 700;
        var viewport = page.getViewport(1);
        var scale = height / viewport.height;
        var scaledViewport = page.getViewport(scale);

        var canvas = document.createElement('canvas');
        var context = canvas.getContext('2d');
        canvas.height = scaledViewport.height;
        canvas.width = scaledViewport.width;

        var renderContext = {
            canvasContext: context,
            viewport: scaledViewport
        };
        page.render(renderContext).then(function () {
            if(currentPage < pdf.numPages) {
                pages[currentPage] = canvas;
                currentPage++;
                pdf.getPage(currentPage).then(renderPage);
            } else {
                for (var i = 1; i < pages.length; i++) {
                    document.getElementById('pdfImageImg').appendChild(pages[i]);
                }
            }
        });
    }

    });
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使用 pdf.js 库渲染整个 pdf 文档? 的相关文章

随机推荐