如何使用PDF.JS库搜索PDF文档？

问题描述

我正在使用PDF.JS库在UI上的应用程序中显示PDF文件。

我试图基于用户在“输入字段”中输入的“搜索文本”添加“搜索PDF文档”功能。

但是我面临以下错误。

未捕获的ReferenceError：未在var pdfViewer = new PDFViewer（{container：container，viewer：viewer}）;

下定义PDFViewer

如果我缺少什么，可以请帮我吗？下面是我的代码。

** IN MODULE.JS FILE: **

require('./vendor.core.js')();
var myApp = angular.module('myApp',[]);
// Do i need to add any dependents here for PDFViewer to work??




** IN VENDOR.CORE.JS FILE: **

require('pdfjs-dist/build/pdf');
require('pdfjs-dist/web/pdf_viewer');




** IN CONTROLLER.JS FILE: **

var base64StringData = "SOME BASE64 BYTE ARRAY OF A PDF FILE";
      
var pdfData = atob(base64StringData);

 // The workerSrc property shall be specified.
PDFJS.workerSrc = 'pdfjs-dist/build/pdf.worker.js'; 

    var pdfDoc = null,pageNum = 1,pageRendering = false,pageNumPending = null,scale = 1.2,canvas = null,ctx = null;
            

canvas = document.getElementById('the-canvas'),ctx = canvas.getContext('2d');

document.getElementById('prev').addEventListener('click',onPrevPage);
document.getElementById('next').addEventListener('click',onNextPage);
document.getElementById('gotoPage').addEventListener('keyup',goToPage);
document.getElementById('zoomIn').addEventListener('click',zoomInPage);
document.getElementById('zoomOut').addEventListener('click',zoomOutPage);


var container = document.getElementById('viewerContainer');
var viewer = document.getElementById('viewer');

var pdfViewer = new PDFViewer({ 
    container: container,viewer: viewer
});

vm.pdfFindController = new PDFFindController({
    pdfViewer: pdfViewer
});

pdfViewer.setFindController(vm.pdfFindController);

container.addEventListener('pagesinit',function () {
    pdfViewer.currentScaleValue = 'page-width';                            
});



PDFJS.getDocument({data: pdfData}).then(function(pdfDoc_) {
    pdfDoc = pdfDoc_;
    document.getElementById('page_count').textContent = pdfDoc.numPages;

    // Initial/first page rendering
//      renderPage(pageNum);  //instead of using renderPage,im using pdfViewer.setDocument() as given in your example.
        pdfViewer.setDocument(pdfDoc);
});



function renderPage(num) {
    pageRendering = true;
    // Using promise to fetch the page
    pdfDoc.getPage(num).then(function(page) {
        var viewport = page.getViewport(scale);
        canvas.height = viewport.height;
        canvas.width = viewport.width;

        // Render PDF page into canvas context
        var renderContext = {
            canvasContext: ctx,viewport: viewport
        };
        var renderTask = page.render(renderContext);

        // Wait for rendering to finish
        renderTask.promise.then(function() {
            pageRendering = false;
            if (pageNumPending !== null) {
            // New page rendering is pending
            renderPage(pageNumPending);
            pageNumPending = null;
            }
        });
    });

    // Update page counters
    document.getElementById('page_num').textContent = num;
}


function queueRenderPage(num) {
    if (pageRendering) {
        pageNumPending = num;
    } else {
        renderPage(num);
    }
}


function onPrevPage() {
    if (pageNum <= 1) {
        return;
    }
    pageNum--;
    queueRenderPage(pageNum);
}


function onNextPage() {
    if (pageNum >= pdfDoc.numPages) {
        return;
    }
    pageNum++;
    queueRenderPage(pageNum);
}


function goToPage() {
    var inputValue = document.getElementById('gotoPage').value;
    console.log("inputValue : " + inputValue);
        if ( (inputValue > pdfDoc.numPages) || (inputValue < 1) ) {
            return;
        }
    queueRenderPage(parseInt(inputValue));
}

function zoomInPage() {
    if (scale >= 2) {
        return;
    }
    scale = scale + 0.2;
    queueRenderPage(pageNum);
}
            
function zoomOutPage() {
    if (scale <= 1) {
        return;
    }
    scale = scale - 0.2;
    queueRenderPage(pageNum);
}

<!-- begin snippet: js hide: false console: true babel: false -->

#viewerContainer {
    height: 100%;
    overflow: auto;
    width: 100%;
    text-align: center;
}

#viewer {
    text-align:center;
    padding:5px;
}

#viewer>button {
    border-radius: 20px;
    border: 1px solid black;
}

#viewer>button:hover {
    border: 1px solid blue;
}

#viewer>button:active {
    border: 1px solid blue;
    font-weight: bold;
}

#viewer>input {
    padding: 4px;
    border: 1px solid black;
}

#viewer>input:focus {
    border: 1px solid blue;
}
<div id="viewerContainer">
    <div id="viewer">
        <input type="text" id="searchDoc" name="searchDoc" placeholder="Search Document">
        &nbsp; &nbsp;
        <button class="btn" id="prev"> < </button>
        <button class="btn" id="next"> > </button>
        &nbsp; &nbsp;
        <span>Page: <span id="page_num"></span> / <span id="page_count"></span></span>
        &nbsp; &nbsp;
        <span>Go To Page: </span><input type="text" id="gotoPage" name="gotoPage" size="3">
        &nbsp; &nbsp;
        <button class="btn" id="zoomOut"> - </button>
        <button class="btn" id="zoomIn"> + </button>
    </div>

    <canvas id="the-canvas"></canvas>
</div>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）