Search Option: Searching text via code about ngx-extended-pdf-viewer HOT 14 CLOSED

Hi Akash,

I'm sure it's possible. I recommend using the lower-level API. At the moment, I don't have the source codes at hand (because I've dug deep into another project), but I've examing the demo page of Mozilla's pdf.js. The find action is executed by this source code:

It's always a pain to figure out what "this" is in the current context, but it shouldn't be much of a problem in this case. Just inspect the event listeners in your browser's developer tools:

Most likely, you'll see something different than pdf_findbar.js:49 because ngx-extended-pdf-viewer uses the minified version of pdf.js. However, the method name should be the same.

Hope that helps!

BTW: if you've figured out how to do it, please report back so I can improve the documentation. And if you're still in trouble despite my hint after - say - a day, don't hesitate to tell me. In this case I'll dig myself out of my other project. :)

from ngx-extended-pdf-viewer.

Hi Stephan,

Thanks for your lead and time, i really appreciate your effort for this.
We have achieved what we wanted just by dispatching "input" event from "fieldInput" after setting the value and it worked like a charm.

 document.getElementById('findInput').setAttribute('value', searchString);    
 document.getElementById('findInput').dispatchEvent(new Event('input'));

Closing the issue.

Thanks,
Akash

from ngx-extended-pdf-viewer.

Hello Stephan,

I am calling search functionality with code, I observe 1st search is taking more time and system is not responding for couple of seconds.

Not sure, only i am facing this issue or its known bug.

Thank you
Wajed

from ngx-extended-pdf-viewer.

I've re-opened this ticket because of two considerations:

• Maybe it's a good idea to offer an official "search" API. Not sure it's possible, but let's investigate it.
• @wajedali You've piqued my curiosity. No idea what's going on, but let's have a look!

from ngx-extended-pdf-viewer.

Hey Stephan,

I'm also experiencing the first search not responding for a few seconds. An official search API would be great for my purposes too!

from ngx-extended-pdf-viewer.

I've implemented the class NgxExtendedPdfViewerService, featuring the methods find(text), findNext(), and findPrevious().

Maybe the delay is a configuration error: #80 (comment)

But maybe it's simply caused by lazy loading. I'll close this ticket now, continuing research in #80 .

from ngx-extended-pdf-viewer.

hey stephanrauh
I have implemented the class NgxExtendedPdfViewerService, featuring the methods find(text) and findNext().
Actually I want to search in pdf programmatically . I tried with find(text) and findNext() but it is not solving my problem, so I want to ask one thing.
Can I click programmatically on index of pdf that will allow me to go to content of the index. Can you please suggest me how I will achieve this programmatically. I think it is possible because click feature is there in your ngx-extended-pdf-viewer.I am looking for solution can you please suggest me.

from ngx-extended-pdf-viewer.

@paritosh291219 What's the problem with using find()?

And when you mention the "index", what are you referring to?

Maybe reading the source code helps you. The find controller is implemented here: https://github.com/stephanrauh/pdf.js/blob/bleeding-edge/web/pdf_find_controller.js

Maybe you're looking for this method: https://github.com/stephanrauh/pdf.js/blob/aab5ad67c84c90456f4b2573e9c97a3339f5d71b/web/ui_utils.js#L122

The source codes belong to the base library, pdf.js, so they are probably difficult to access.

from ngx-extended-pdf-viewer.

Hey stephanrauh
I have one pdf which have index if I want to click on index goes to it's content in pdf. I want to go there by programmatically
Suppose the index like 1- pricing 2- rules if I clicked on pricing goes to pricing content in pdf. I have one button outside the pdf with text pricing I have inolimented search method programitically but it gives me only first result which is in index but i want to go their content that's y I am thinking I found first result them I want to click on it programitically and it's goes their content. Can u please suggest.

from ngx-extended-pdf-viewer.

Oh, you're referring to this index?

The tree is a list of hyperlinks. Just find it with document.querySelector() (or something like that) and call the click(). For example, on http://localhost:4200/simple, this code navigates to page 12:

Array.from(document.querySelectorAll('a'))
  .find(el => el.textContent.includes( 'Jelly')).click()

Does this answer your question?

from ngx-extended-pdf-viewer.

hey stephanrauh
I cant able to find anchor tag using this - Array.from(document.querySelectorAll('a')). Its return all the anchor tag but those are not present in pdf. can you please explain how I will get all anchor tag present in my PDF. My pdf looks like this-

i want to click on the selected index and reach their programmatically.

from ngx-extended-pdf-viewer.

Oh, that's what you're talking about! Well, it depends. Most documents are generated very cheaply. So the first question is if you can click the entries of the table of contents. My test document at https://pdfviewer.net/find does have this feature, so you can jump directly to a chapter by clicking it in the TOC.

Analyzing it in the developer tools reveals that there's a hyperlink - but there's no connection to the text. It's just a hyperlink over a certain screen area. Adding insult to injury, the text of the document is just an image.

If you've got a text layer, you can try to find the text in the text layer, determine the position of the text on the page, and find the link associated to this position. That's cumbersome, but it's probably possible. But again, things are not so simple: pdf.js splits the text into many small span tags. So you have to implement a find method reading the text layer while ignoring all the <span>s.

By the way, I suspect you don't render the text layer yet. I don't the the "find" symbol in your screenshot, nor do I find the "select text" icon. Maybe you have to add the attribute [textLayer]="true". If you're really unlucky, that's not possible because your document doesn't contain text. A surprising number of documents are simply a collection of images.

from ngx-extended-pdf-viewer.

Hey stephanrauh
Thanks for the reply,
Ok got it but I am not able to see any span element in my developer tool. Only I find is hyperLink and canvas,

Actually I have one keyword to search which is present in our table of content and its content also, and I have one button outside the PDF (with name of table of content) and on clicking on this I want to reach over its content, I tried with NgxExtendedPdfViewerService using find(text) and findNext(). But every time it takes me first occurrence of the search result which is in my case table of content but I want to go to its content (that is the second occurrence) in my case.
I tried with find(text) and findNext()

  if (this.ngxExtendedPdfViewerService.find(text, {
      wholeWords: true,
      highlightAll: true,
      matchCase: true,
      findMultipleSearchTexts: true
    })) {
      this.ngxExtendedPdfViewerService.findNext();
    }

from ngx-extended-pdf-viewer.

If find(text) find a result (albeit the wrong result), your PDF file contains text. That's good news.

You say you can only see the canvases and the hyperlinks. Try adding the attribute [textLayer]="true". ngx-extended-pdf-viewer omits the text layer if it believes it's not needed. That's a performance optimization you want to get rid of.

from ngx-extended-pdf-viewer.