How to search using pdf.js?

Question

I am showing a pdf file with pdf.js in my Ionic application. I do not use viewer.js and viewer.html because I need a completely different layout. Now I have a custom search bar and I want to highlight the conditions in my pdf file. Is there a function that I can call for this?

I transfer the file as follows:

$scope.renderPages = function(pdfDoc) { $scope.pdfFile = pdfDoc; for(var num = 1; num <= pdfDoc.numPages; num++){ pdfDoc.getPage(num).then($scope.renderPage); } } $scope.renderPage = function(page) { var viewport = page.getViewport(1); scale = document.getElementById('viewer').clientWidth / viewport.width; 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; var canvasContainer = document.getElementById('viewer'); canvasContainer.appendChild(canvas); page.render(renderContext); } 

HTML:

 <div id="viewerContainer" style="padding-bottom: 100%; padding-top: 20px;"> <div id="viewer" class="viewer-styles"> </div> </div> 

Answer 1

Now I have found a solution!

 var container = document.getElementById('viewerContainer'); var viewer = document.getElementById('viewer'); var pdfViewer = new PDFViewer({ container: container, viewer: viewer }); $scope.pdfFindController = new PDFFindController({ pdfViewer: pdfViewer ); pdfViewer.setFindController($scope.pdfFindController); container.addEventListener('pagesinit', function () { pdfViewer.currentScaleValue = 'page-width'; }); PDFJS.getDocument(MY_PATH_TO_THE_PDF).then(function (pdfDocument) { pdfViewer.setDocument(pdfDocument); }); 

Search for terms:

 $scope.pdfFindController.executeCommand('find', { caseSensitive: false, findPrevious: undefined, highlightAll: true, phraseSearch: true, query: "myQuery" }); 

And I had to import viewer.js.

The code I posted in the question is no longer needed. PDFViewer provides a PDF file.

Answer 2

I am trying to use your solution, but I get the error "PDFViewer is not defined". How did you install this library?

I tried these CDNs, but this does not work:

https://www.jsdelivr.com/package/npm/pdfjs-dist

https://cdnjs.com/libraries/pdf.js

https://unpkg.com/pdfjs-dist/

thank you in advance !!!