Navigation to the specific page when searching text in PDF viewer

[Chua Wei Kiat]

Dear Sir,

How can I allow the pdf viewer jump to the specific page after search?

The  pdfViewer.textSearchModule.searchText(text) function is working perfectly and I can see the search text is being highlighted but how can I let the viewer jump to that page?

I try to use   pdfViewer.navigation.goToLastPage() and   pdfViewer.navigation.goToPage(pageno); but it always go back to p

function loadPdf() {

        var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];

        var filename = document.getElementById('txtfilename').value;

        var text = document.getElementById('txtsearchstring').value;

         ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSearch,ej.pdfviewer.navigation);

        pdfViewer.serviceUrl = '/api/PdfViewer';

        pdfViewer.load(filename, null);

        pdfViewer.textSearchModule.searchText(text);

        pdfViewer.navigation.goToLastPage();

    }

Regards,

WK

[Chua Wei Kiat]

Besides, does DocumentEditor available for these two functions as well?
If yes, could you please provide me with the command (search and navigate to the target page)?

[Shamini Kiruba Sobers]

Hi Chua, 

You can use the same functions “pdfViewer.navigation.goToPage(pageno);” and “pdfViewer.navigation.goToLastPage();” to jump to the specified page and to the last page respectively. We suggest you avoid calling the load method within the function to load the document again as this causes the issue. The document can be loaded during the component initialization itself as in the below code. 

<button onclick="loadPdf()">Load PDF</button> 

 

<ejs-pdfviewer id="pdfviewer" style="height:600px" serviceUrl="/api/PdfViewer" documentPath="PDF_Succinctly.pdf" enableNavigation="true"></ejs-pdfviewer> 

 

<script> 

    function loadPdf() { 

 

        var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0]; 

 

        var text = "PDF"; 

 

        pdfViewer.textSearchModule.searchText(text); 

 

        //pdfViewer.navigation.goToLastPage(); 

 

        pdfViewer.navigation.goToPage(12); 

 

    } 

</script> 

Kindly refer to the below working sample and revert to us if any queries. 

https://www.syncfusion.com/downloads/support/forum/171932/ze/GettingStarted_Core-1724774550 

We have forwarded the Document Editor related query to the concerned team. We will update the details on January 17^th, 2022. 

Regards, 

Shamini 

[Shamini Kiruba Sobers]

Hi Chua, 

In Document Editor, you can use find API to search to the specific text and scrollToPage API to navigate to specific page number. 

Code snippet:  

documenteditor.search.find('Some text', 'None');  

//// Give page number in parameter  

documenteditor.scrollToPage(2);  

  

Documentation: 

https://ej2.syncfusion.com/aspnetcore/documentation/document-editor/find-and-replace/#find-the-immediate-occurrence-in-the-document   

https://ej2.syncfusion.com/documentation/api/document-editor/#scrolltopage 

 

 

Regards, 

Shamini