How to render whole pdf document using pdf.js library?

后端 未结 4 559
一生所求
一生所求 2020-12-29 14:24

I tried rendering PDF document using pdf.js library. I know only basics in javascript and I am new to promises, so at first I followed advice on this page: Render .pdf to si

4条回答
  •  一整个雨季
    2020-12-29 15:07

    Thank you @user3913960, your concept worked for me. I found some issues in your code which I fixed. Here is the code:

    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: http://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");
    

提交回复
热议问题