Viewer initialization event and custom viewer events
Before any usage of the viewer JS istance, the viewer must be initialized.
When that happens, event twWiewerInitialized is raised.
That is the recommended place to add triggers for viewer's custom events.
Viewer component exposes some custom javascript events.
Every of its event has a detail property.
Name of custom events and properties of its detail property:
pageRendered: pageNum, doc
allVisiblePagesRendered: doc
allPagesInitialized: doc
loadDocumentError: reason, url, file, evt
documentReleased
pageRenderedForPrint: pageNum, doc
allPagesRenderedForPrint: doc
printingCanceled: doc
pageRenderedForPrint: pageNum, doc
document.addEventListener("twWiewerInitialized", function (evt) {
const viewerApp = event.detail.app;
viewerApp.viewerDiv.addEventListener("pageRendered", function (evt) {
console.log(`page number:${evt.detail.pageNum} for document ${evt.detail.doc} has been rendered.`);
});
viewerApp.viewerDiv.addEventListener("allVisiblePagesRendered", function (evt) {
console.log("allVisiblePagesRendered", evt);
});
viewerApp.viewerDiv.addEventListener("allPagesInitialized", function (evt) {
console.log("allPagesInitialized", evt);
});
viewerApp.viewerDiv.addEventListener("documentReleased", function (evt) {
console.log("documentReleased", evt);
});
viewerApp.viewerDiv.addEventListener("pagePrinted", function (evt) {
console.log("pagePrinted", evt.detail);
});
});
Retrieve web viewer JS instance by ID
const viewerId = 'yourViewerId';
const viewer = window.TWPdfViewerUtil.getViewer(viewerId);
if (!viewer) {
console.log(`viewer with id ${viewerId} not found.`);
} else {
console.log(`viewer with id ${viewerId} found.`);
}
NOTE viewer instance is ready for safely usage only after event twWiewerInitialized.
Retrieve all web viewer JS instances
const viewers = window.TWPdfViewerUtil.getActiveViewers();
for(let i=0; i < viewers.length;i++) {
console.log(`viewer with id ${viewers[i].id}`);
}
NOTE viewer instance is ready for safely usage only after event twWiewerInitialized.
Load document after the web page is completely rendered
If the PDF is really big, it could take some time to load a PDF and it can influence negatively Google Page Speed ranking.
If that is the case, you can execute this code to load your document after the DOMContentLoaded event.
document.addEventListener("twWiewerInitialized", function (event) {
const viewer = event.detail.app;
viewer.addEventListener("pageRendered", function (evt) {
console.log(`page number:${evt.detail.pageNum} for document ${evt.detail.doc} has been rendered.`);
});
// optional custom load document events
viewer.addEventListener("allVisiblePagesRendered", function (evt) {
console.log("allVisiblePagesRendered", evt.detail.doc);
});
viewer.addEventListener("allPagesInitialized", function (evt) {
console.log("allPagesInitialized", evt.detail.doc);
});
viewer.addEventListener("loadDocumentError", function (evt) {
console.log("loadDocumentError", evt.detail.url, evt.detail.reason, evt.detail.file, evt.detail.evt);
});
viewer.loadDocumentFromUrl("test-pdf/pdfprint-manual.pdf");
// alternatives for load:
// viewer.loadDocumentFromFile(file, password, viewer);
// viewer.openThroughDialog();
//if you want to hide open document button from the toolbar
viewer.toolbar.isOpenVisible = false;
});
Close PDF document
const viewer = window.TWPdfViewerUtil.getViewer('yourViewerId');
viewer.releasePdfDoc();
//if you want to hide open document button from the toolbar
viewer.toolbar.isCloseVisible = false;1
Download loaded PDF document
const viewer = window.TWPdfViewerUtil.getViewer('yourViewerId');
viewer.downloadDocument();
//if you want to hide download document button from the toolbar
viewer.toolbar.isDownloadVisible = false;
Get all available built-in themes
const themes = window.TWPdfViewerUtil.getBuiltInThemes();
for(let i=0; i< themes.length; i++) {
console.log(`theme name:${themes[i]}`);
}
Change viewer theme by built-in name
window.TWPdfViewerUtil.changeThemeByName('blue-circle');
Change viewer theme by URL
window.TWPdfViewerUtil.changeThemeBySrcUrl('your_custom_theme_url');
NOTE Changing a viewer theme affects all viewer instances on the page.
Page navigation
const viewer = window.TWPdfViewerUtil.getViewer('yourViewerId');
// let assume that you have already loaded a document with at least 3 pages
console.log(`Number of pages:${viewer.pdfDocument.pages.length}');
console.log(`Current page number:${viewer.currentPageNumber}');
viewer.gotoPage(2);
viewer.nextPage(); // it will go to page 3
viewer.previousPage(); // it will go to page 2
viewer.prevVisited(); // it will go to page 3
viewer.nextVisited(); // it will go to page 2
//if you want to hide some or all page navigation from the toolbar
viewer.toolbar.isNextPageVisible = false;
viewer.toolbar.isPreviousPageVisible = false;
viewer.toolbar.isNextVisitedVisible = false;
viewer.toolbar.isPreviousVisitedVisible = false;
viewer.toolbar.isPageNumberVisible = false;
Setting search options
const viewer = window.TWPdfViewerUtil.getViewer('yourViewerId');
viewer.toolbar.findOptions.wholeWord = true;
viewer.toolbar.findOptions.caseSensitive = true;
viewer.toolbar.findOptions.highlightAll = true;
//if you want to hide search field on the toolbar
viewer.toolbar.isSearchVisible = false;
NOTE
In current version isn't possible to execute find directly from JS or navigate to previous or next find.
If your use-case scenario needs it, please contact us with the details about your use case and we will try to add it.
Print document
const viewer = window.TWPdfViewerUtil.getViewer('yourViewerId');
//optional available print events
viewer.addEventListener('pageRenderedForPrint', function(event) {
console.log(`Page rendered for print. Document:${event.detail.doc} page number:${event.detail.pageNum}`);
});
viewer.addEventListener('allPagesRenderedForPrint', function(event) {
console.log(`All pages rendered for print. Document:${event.detail.doc}`);
});
viewer.addEventListener('printingCanceled', function(event) {
console.log(`Printing cancelled. Document:${event.detail.doc}`);
});
// we assume that you have already loaded a PDF document
viewer.print(); // it will open a new window and execute the print
// if you want to hide print button from the toolbar
viewer.toolbar.isPrintVisible = false;
Bookmarks
const viewer = window.TWPdfViewerUtil.getViewer('yourViewerId');
// available bookmarks options
viewer.bookmarkLayer.bookmarksFullyExpanded = true;
viewer.bookmarkLayer.showBookmarksOnOpen = false;
viewer.bookmarkLayer.preserveBookmarksState = true;
// we assume that you have already loaded a PDF document and that document has bookmarks
console.log('All bookmarks:', viewer.bookmarkLayer.allBookmarks);
viewer.bookmarkLayer.show(true);
// if you want to hide to the visitor show bookmarks button set this to false
viewer.toolbar.isBookmarksVisible = false;
Document info properties
const viewer = window.TWPdfViewerUtil.getViewer('yourViewerId');
viewer.showDocumentProperties();
// ...
viewer.closeDocumentProperties();
// if you want to hide to the visitor show document info button set this to false
viewer.toolbar.isDocumentInfoVisible = false;
NOTE
In current version isn't possible to get document properties object directly from JS.
But, if your use-case scenario needs it, please contact us with the details about your use case and we will try to add it.
Page rotation
const viewer = window.TWPdfViewerUtil.getViewer('yourViewerId');
viewer.rotateClockwise(); // rotate for 90 degrees
viewer.rotateCounterClockwise(); // rotate for -90 degrees
// you can hide rotation buttons from the toolbar
viewer.toolbar.isRotateClockwiseVisible = false;
viewer.toolbar.isRotateCounterClockwiseVisible = false;
Single page VS Multi page view
const viewer = window.TWPdfViewerUtil.getViewer('yourViewerId');
viewer.activateSinglePageView();
// ...
viewer.activateMultiPageView();
// you can hide view buttons from the toolbar
viewer.toolbar.isSingleViewVisible = false;
viewer.toolbar.isMultiViewVisible = false;
Zoom
const viewer = window.TWPdfViewerUtil.getViewer('yourViewerId');
//available zoom levels for the loaded document are based
//on the size of the PDF document
console.log(viewer.zoomService.zoomLevels);
//max zoom value for the loaded document
console.log(viewer.zoomService.getMaxZoomValue());
//increases zoom level
viewer.zoomService.zoomIn();
//decreases zoom level
viewer.zoomService.zoomOut();
//set zoom value to specific value
viewer.zoomService.setZoomValue(65);
console.log('Current scale', viewer.zoomService.currentScale);
// you can hide zoom functionality from the toolbar
viewer.toolbar.isZoomInVisible = false;
viewer.toolbar.isZoomOutVisible = false;
viewer.toolbar.isZoomDropDownVisible = false;
Page text extraction and text selection
const viewer = window.TWPdfViewerUtil.getViewer('yourViewerId');
//disable text selection
viewer.disableSelection(true);
// extract all text from the 1st page
const pageText = viewer.getPageTextContent(1);
NOTE
In current version isn't possible to get already selected text or to select some text directly from JS.
But, if your use-case scenario needs it, please contact us with the details about your use case and we will try to add it.
Retrieve viewer by ID
const viewer = window.TWPdfViewerUtil.getViewer(viewerId);
if (!viewer) {
console.log(`viewer with id ${viewerId} not found.`);
} else {
console.log(`viewer with id ${viewerId} found.`);
}
Retrieve all viewers
const viewers = window.TWPdfViewerUtil.getActiveViewers();
for (let i = 0; i < viewers.length; i++) {
console.log(`viewer with id ${viewers[i].id}`);
}
A few load document event examples
const viewer = window.TWPdfViewerUtil.getViewer(viewerId);
viewer.viewerDiv.addEventListener("pageRendered", function (evt) {
console.log(
`page number:${evt.detail.pageNum} for document ${evt.detail.doc} has been rendered.`
);
});
// optional custom load document events
viewer.viewerDiv.addEventListener("allVisiblePagesRendered", function (evt) {
console.log("allVisiblePagesRendered", evt.detail.doc);
});
viewer.viewerDiv.addEventListener("allPagesInitialized", function (evt) {
console.log("allPagesInitialized", evt.detail.doc);
});
viewer.viewerDiv.addEventListener("loadDocumentError", function (evt) {
console.log(
"loadDocumentError",
evt.detail.url,
evt.detail.reason,
evt.detail.file,
evt.detail.evt
);
});
viewer.loadDocumentFromUrl("test-pdf/pdfprint-manual.pdf");
// alternatives for load:
// viewer.loadDocumentFromFile(file, password, viewer);
// viewer.openThroughDialog();
// if you want to hide open document button from the toolbar
viewer.toolbar.isOpenVisible = false;
