Navigate to specific pages in a PDF using link annotations
The PDF loaded in this sample demonstrates how link annotations can be used to navigate to specific pages in a document.
app.js
index.html
styles.css
window.onload = function(){
//DsPdfViewer.LicenseKey = "***key***";
const viewer = new DsPdfViewer("#viewer", {
workerSrc: "/document-solutions/javascript-pdf-viewer/demos/product-bundles/build/dspdfviewer.worker.js",
supportApi: getSupportApiSettings(),
restoreViewStateOnLoad: false
});
viewer.addDefaultPanels();
viewer.addAnnotationEditorPanel();
viewer.toolbarLayout.viewer = {
default: ['save', '$navigation', '$split', 'text-selection', 'pan', '$zoom', '$fullscreen', 'download', 'print', 'rotate', 'view-mode', 'hide-annotations', 'doc-properties', 'about'],
mobile: ['save', '$navigation', '$split', 'text-selection', 'pan', '$zoom', '$fullscreen', 'download', 'print', 'rotate', 'view-mode', 'hide-annotations', 'doc-properties', 'about'],
fullscreen: ['$fullscreen', 'save', '$navigation', '$split', 'text-selection', 'pan', '$zoom', '$fullscreen', 'download', 'print', 'rotate', 'view-mode', 'hide-annotations', 'doc-properties', 'about']
};
viewer.zoomMode = 1; /* ZoomMode.PageWidth */
viewer.applyToolbarLayout();
viewer.open("/document-solutions/javascript-pdf-viewer/demos/product-bundles/assets/pdf/viewer-link-navigate-page.pdf");
}