WebViewer triggers numerous events in response to user interactions or processes. They might be helpful in adding additional behavior to how users use WebViewer or performing updates to annotations as users scroll to another page.
Other than the lifecycle events mentioned in the loading guide , you may also be interested when a user changes pages. The pageNumberUpdated
Subscribe to this event via DocumentViewer
JavaScript (v8.0+) JavaScript (v6.0+)
1 WebViewer ({
2 initialDoc : ' https://myserver.com/myfile.pdf '
3 }, document. getElementById ( ' viewer ' ))
4 . then ( instance => {
5 const { documentViewer, annotationManager } = instance.Core;
6
7 documentViewer. addEventListener ( ' pageNumberUpdated ' , pageNumber => {
8 const annotsOnPage = annotationManager. getAnnotationList (). filter ( annot => annot.PageNumber === pageNumber);
9
10 // Do something with annotations e.g. Focus on certain form fields
11 });
12 });
1 WebViewer ({
2 initialDoc : ' https://myserver.com/myfile.pdf '
3 }, document. getElementById ( ' viewer ' ))
4 . then ( instance => {
5 const { docViewer, annotManager } = instance;
6
7 docViewer. on ( ' pageNumberUpdated ' , pageNumber => {
8 const annotsOnPage = annotManager. getAnnotationList (). filter ( annot => annot.PageNumber === pageNumber);
9
10 // Do something with annotations e.g. Focus on certain form fields
11 });
12 });
When users are viewing the document, they may change zoom levels or how pages are viewed (in ways that don't permanently affect the document). These will also trigger events that you could listen to.
JavaScript (v8.0+) JavaScript (v6.0+)
1 WebViewer ({
2 initialDoc : ' https://myserver.com/myfile.pdf '
3 }, document. getElementById ( ' viewer ' ))
4 . then ( instance => {
5 const { documentViewer, Tools } = instance.Core;
6
7 documentViewer. addEventListener ( ' zoomUpdated ' , zoom => {
8 if (zoom > 3 ) {
9 // Change tools when zoom level is above 300%
10 documentViewer. setToolMode (documentViewer. getToolMode (Tools.ToolNames. RECTANGLE ));
11 }
12 });
13 });
1 WebViewer ({
2 initialDoc : ' https://myserver.com/myfile.pdf '
3 }, document. getElementById ( ' viewer ' ))
4 . then ( instance => {
5 const { docViewer, Tools } = instance;
6
7 docViewer. on ( ' zoomUpdated ' , zoom => {
8 if (zoom > 3 ) {
9 // Change tools when zoom level is above 300%
10 documentViewer. setToolMode (documentViewer. getToolMode (Tools.ToolNames. RECTANGLE ));
11 }
12 });
13 });
When searches are conducted with the DocumentViewer, whether this is done through the UI or directly through an API, you can get the results by listening to these events:
JavaScript (v8.0+) JavaScript (v6.0+)
1 WebViewer ({
2 initialDoc : ' https://myserver.com/myfile.pdf '
3 }, document. getElementById ( ' viewer ' ))
4 . then ( instance => {
5 const { documentViewer, Tools } = instance.Core;
6
7 const prevSearchResults = []; // Rendered in a custom panel
8
9 documentViewer. addEventListener ( ' searchResultsChanged ' , results => {
10 prevSearchResults. push (results);
11 });
12 });
1 WebViewer ({
2 initialDoc : ' https://myserver.com/myfile.pdf '
3 }, document. getElementById ( ' viewer ' ))
4 . then ( instance => {
5 const { docViewer, Tools } = instance;
6
7 const prevSearchResults = []; // Rendered in a custom panel
8
9 docViewer. on ( ' searchResultsChanged ' , results => {
10 prevSearchResults. push (results);
11 });
12 });
These input events are fired when the mouse and keyboard are interacting with the document viewer.
Here is an example of an onHover for annotations using the mouseMove event.
JavaScript (v8.0+) JavaScript (v6.0+)
1 WebViewer ({
2 initialDoc : ' https://myserver.com/myfile.pdf '
3 }, document. getElementById ( ' viewer ' ))
4 . then ( instance => {
5 const { documentViewer, annotationManager } = instance.Core;
6
7 documentViewer. addEventListener ( ' mouseMove ' , evt => {
8 const annot = annotationManager. getAnnotationByMouseEvent (evt);
9 if (annot) {
10 console. log ( " onHover: " + annot.Id);
11 }
12 });
13 });
1 WebViewer ({
2 initialDoc : ' https://myserver.com/myfile.pdf '
3 }, document. getElementById ( ' viewer ' ))
4 . then ( instance => {
5 const { docViewer, annotManager } = instance;
6
7 docViewer. on ( ' mouseMove ' , evt => {
8 const annot = annotManager. getAnnotationByMouseEvent (evt);
9 if (annot) {
10 console. log ( " onHover: " + annot.Id);
11 }
12 });
13 });