javascript – 如何使用pdf.js库呈现整个pdf文档？

我尝试使用pdf.js库渲染PDF文档.我只知道 javascript的基础知识而且我是承诺的新手,所以一开始我按照这个页面上的建议： Render .pdf to single Canvas using pdf.js and ImageData(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,ctx.canvas.width,ctx.canvas.height);
            callback(this);
        }
        img.src = pages[index];
    }
}

解决方法

谢谢@ user3913960,你的概念对我有用.我在你修复的代码中发现了一些问题.这是代码：

function loadPDFJS(pageUrl) {
    PDFJS.workerSrc = 'resources/js/pdfjs/pdf.worker.js';
    var currentPage = 1;
    var pages = [];
    var globalPdf = null;
    var container = document.getElementById('pdf-container');
    function renderPage(page) {
        //
        // Prepare canvas using PDF page dimensions
        //
        var canvas = document.createElement('canvas');
        // Link: https://stackoverflow.com/a/13039183/1577396
        // Canvas width should be set to the window's width for appropriate
        // scaling factor of the document with respect to the canvas width
        var viewport = page.getViewport(window.screen.width / page.getViewport(1.0).width);
        // append the created canvas to the container
        container.appendChild(canvas);
        // Get context of the canvas
        var context = canvas.getContext('2d');
        canvas.height = viewport.height;
        canvas.width = viewport.width;
        //
        // Render PDF page into canvas context
        //
        var renderContext = {
            canvasContext: context,viewport: viewport
        };
        page.render(renderContext).then(function () {
            if (currentPage < globalPdf.numPages) {
                pages[currentPage] = canvas;
                currentPage++;
                globalPdf.getPage(currentPage).then(renderPage);
            } else {
                // Callback function here,which will trigger when all pages are loaded
            }
        });
    }
    PDFJS.getDocument(pageUrl).then(function (pdf) {
        if(!globalPdf){
            globalPdf = pdf;
        }
        pdf.getPage(currentPage).then(renderPage);
    });
}
loadPDFJS("somepdffilenamehere.pdf");

原文地址：https://www.jb51.cc/js/158549.html