Ng2-pdf-viewer: Public PDFFindController

[viktorhajer]

Bug Report or Feature Request (mark with an x)

- [ ] Regression (a behavior that used to work and stopped working in a new release)
- [ ] Bug report -> please search issues before submitting
- [ x] Feature request
- [ ] Documentation issue or request

It would be great to have public PDFFindController member in the component in order to use the find feature of the PDFjs. I cloned the project and the following code was working fine if the show-alland render-textwere true:

public pdfFindController: any;

in the setupViewer:
this.pdfFindController = new (<any>PDFJS).PDFFindController({pdfViewer: this.pdfViewer}); this.pdfViewer.setFindController(this.pdfFindController);

In my test project:
this.pdfComponent.pdfFindController.executeCommand('find', { caseSensitive: false, findPrevious: undefined, highlightAll: true, phraseSearch: true, query: text });

Thanks in advance!

[nlundby]

Thanks! I've been trying to figure this one out - a great start!

[VadimDez]

Relates to #115

[viktorhajer]

Just a note:
I created my own implementation of the module because

• the search and outline function was required and
• and I had to use the _show-all=false_, because the length of the PDF was ~16.000 pages and the _show-all=true_ wasn't effective (memory/CPU usage and also time-consuming)

For this I had to use the "newly" introduced _PDFSinglePageViewer_ instead of the _PDFViewer_ and it solved my problem also the search and outline function was working properly.

My init function (after that the I can load the PDF)

  private initPDFJS() {
    const container = this.getContainer(); // get html container
    (<any>PDFJS).disableTextLayer = false;
    this.pdfLinkService = new (<any>PDFJS).PDFLinkService();

    this.pdfViewer = new (<any>PDFJS).PDFSinglePageViewer({
      container: container,
      removePageBorders: false,
      linkService: this.pdfLinkService,
    });
    this.pdfLinkService.setViewer(this.pdfViewer);

    this.pdfFindController = new (<any>PDFJS).PDFFindController({
      pdfViewer: this.pdfViewer
    });
    this.pdfViewer.setFindController(this.pdfFindController);

    container.addEventListener('pagesinit', () => {
      this.pdfViewer.currentScaleValue = 'page-fit';
    });
  }

My simplified search functions:

  public search(text: string, caseSensitive: boolean = false) {
      const searchText = text ? text.trim() : '';
      if (!searchText) {
        return;
      }      
      this.pdfFindController.onUpdateResultsCount = this.onUpdateResultsCount.bind(this);
      this.pdfFindController.onUpdateState = this.onUpdateState.bind(this);
      this.pdfFindController.executeCommand('find', {
        caseSensitive: caseSensitive,
        findPrevious: false,
        highlightAll: true,
        phraseSearch: true,
        query: searchText
      });
    }
  public nextMatch() {
    if (this.pdfFindController.matchCount > 1) {
      this.pdfFindController.nextMatch();
      this.currentPage = this.pdfViewer._currentPageNumber;
    }
  }

I hope it may helpful.

[Demokumar]

I try this got error:
Uncaught (in promise): TypeError: PDFJS.PDFSinglePageViewer is not a constructor

[viktorhajer]

You may have to update the version of the PDFJS in the package.json, that interface was introduced in the following version:
"pdfjs-dist": "1.10.88",

(Releases: https://github.com/mozilla/pdf.js/releases)

[VadimDez]

Made PDFFindController public in 4.1.1
https://github.com/VadimDez/ng2-pdf-viewer/blob/master/CHANGELOG.md#411

[androidovshchik]

@viktorhajer
cool library https://github.com/viktorhajer/simple-pdf-viewer