Viewer-Initialisierungsereignis und benutzerdefinierte Viewer-Ereignisse
Viewer-Initialisierungsereignis und benutzerdefinierte Viewer-Ereignisse
Bevor die Viewer JS instance verwendet werden kann, muss der Viewer initialisiert werden.
Wenn dies geschieht, wird das Ereignis twWiewerInitialized ausgelöst.
Dies ist der empfohlene Ort, um Auslöser für die benutzerdefinierten Ereignisse des Viewers hinzuzufügen.
Die Viewer-Komponente stellt einige benutzerdefinierte Javascript-Ereignisse dar.
Jedes seiner Ereignisse hat eine Detail-Eigenschaft.
Name der benutzerdefinierten Ereignisse und Eigenschaften der Detail-Eigenschaft:
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);
});
});
Web-Viewer JS-Instanz nach Id abrufen
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.`);
}
HINWEIS Die Viewer-Instanz ist erst nach dem Ereignis twWiewerInitialized für die sichere Verwendung bereit.
Alle Web Viewer JS-Instanzen abrufen
const viewers = window.TWPdfViewerUtil.getActiveViewers();
for(let i=0; i < viewers.length;i++) {
console.log(`viewer with id ${viewers[i].id}`);
}
HINWEIS Die Viewer-Instanz ist erst nach dem Ereignis twWiewerInitialized für die sichere Verwendung bereit.
Dokument laden, nachdem die Webseite vollständig gerendert wurde
Wenn die PDF-Datei sehr groß ist, kann das Laden einer PDF-Datei einige Zeit in Anspruch nehmen, was sich negativ auf das Google Page Speed Ranking auswirken kann.
In diesem Fall können Sie diesen Code ausführen, um Ihr Dokument nach dem Ereignis DOMContentLoaded zu laden.
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;
});
PDF-Dokument schließen
const viewer = window.TWPdfViewerUtil.getViewer('yourViewerId');
viewer.releasePdfDoc();
//if you want to hide open document button from the toolbar
viewer.toolbar.isCloseVisible = false;1
Geladenes PDF-Dokument herunterladen
const viewer = window.TWPdfViewerUtil.getViewer('yourViewerId');
viewer.downloadDocument();
//if you want to hide download document button from the toolbar
viewer.toolbar.isDownloadVisible = false;
Alle verfügbaren integrierten Themes anzeigen
const themes = window.TWPdfViewerUtil.getBuiltInThemes();
for(let i=0; i< themes.length; i++) {
console.log(`theme name:${themes[i]}`);
}
Viewer-Theme nach Namen ändern
window.TWPdfViewerUtil.changeThemeByName('blue-circle');
Viewer-Thema nach URL ändern
window.TWPdfViewerUtil.changeThemeBySrcUrl('your_custom_theme_url');
HINWEIS Das Ändern eines Viewer-Themes wirkt sich auf alle Viewer-Instanzen auf der Seite aus.
Seitennavigation
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;
Suchoptionen einstellen
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;
HINWEIS
In der aktuellen Version ist es nicht möglich, Dokumenteigenschaften direkt von JS abzurufen.
Wenn Ihr Anwendungsfall dies erfordert, kontaktieren Sie uns bitte mit den Details. Wir werden dann versuchen, dies hinzuzufügen.
Dokument drucken
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;
Lesezeichen
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;
Dokumentinfo-Eigenschaften
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;
HINWEIS
In der aktuellen Version ist es nicht möglich, Dokumenteigenschaften direkt von JS abzurufen.
Wenn Ihr Anwendungsfall dies erfordert, kontaktieren Sie uns bitte mit den Details. Wir werden dann versuchen, dies hinzuzufügen.
Seite drehen
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;
Einzelseitenansicht vs. mehrseitige Ansicht
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;
Zoomen
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;
Seitentext und Textauswahl extrahieren
const viewer = window.TWPdfViewerUtil.getViewer('yourViewerId');
//disable text selection
viewer.disableSelection(true);
// extract all text from the 1st page
const pageText = viewer.getPageTextContent(1);
HINWEIS
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.
Viewer nach ID abrufen
const viewer = window.TWPdfViewerUtil.getViewer(viewerId);
if (!viewer) {
console.log(`viewer with id ${viewerId} not found.`);
} else {
console.log(`viewer with id ${viewerId} found.`);
}
Alle Viewer abrufen
const viewers = window.TWPdfViewerUtil.getActiveViewers();
for (let i = 0; i < viewers.length; i++) {
console.log(`viewer with id ${viewers[i].id}`);
}
Beispiele für das Laden von Dokumenten
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;
