chocolate cake chocolate cake - 1 year ago 111
Javascript Question

How to search with pdf.js?

I'm displaying a pdf file with pdf.js in my Ionic App. I do not use viewer.js and viewer.html, because I need a totally different layout. Now I have a custom search bar and I want to highlight terms in my pdf file. Is there a function I can invoke to do this?

I'm rendering the file like this:

$scope.renderPages = function(pdfDoc) {
$scope.pdfFile = pdfDoc;
for(var num = 1; num <= pdfDoc.numPages; num++){

$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');



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

Answer Source

Now I found the 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


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

PDFJS.getDocument(MY_PATH_TO_THE_PDF).then(function (pdfDocument) {

Search for terms:

    type: 'find', 
    detail: {
        caseSensitive: false, 
        findPrevious: undefined, 
        highlightAll: true, 
        phraseSearch: true, 
        query: "myQuery"

And I had to import the viewer.js.

The code that I postet in the question is not needed anymore. The PDFViewer renders the pdf.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download