Add Thumbnail page navigation with RadPdfViewer
Environment
| Product | RadPdfViewer for ASP.NET AJAX |
Description
Q: How to add Thumbnail page navigation to the RadPdfViewer
Solution
Prerequisites
- Register the Pdf.js library on the page:
<head runat="server">
<title></title>
...
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.js"></script>
<script type="text/javascript">
window.pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.worker.js';
</script>
</head>
Declare an empty div that will serve as a container for the Thumbnail navigation.
Create the RadPdfViewer and set the PDF file that will be displayed
<div class="thumbnailsDiv"></div>
<telerik:RadPdfViewer runat="server" ID="RadPdfViewer1" RenderMode="Lightweight" Height="600px" Width="600px">
<PdfjsProcessingSettings File="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf">
</PdfjsProcessingSettings>
</telerik:RadPdfViewer>
Create the Thumbnail navigation using JavaScript
Use the pdf.js to get the document
For each page generate a thumbnail as a canvas element wrapped in a separate div element
Wire the 'onclick' event to each Thumbnail and append it in the predefined wrapper.
In the Click event get a reference to the PdfViewer control object and activate the respective page in the PDF document using the Kendo widget.
function makeThumb(page) {
// draw page to fit into 96x96 canvas
var vp = page.getViewport(1);
var canvas = document.createElement("canvas");
canvas.width = canvas.height = 200;
var scale = Math.min(canvas.width / vp.width, canvas.height / vp.height);
return page.render({ canvasContext: canvas.getContext("2d"), viewport: page.getViewport(scale) }).promise.then(function () {
return canvas;
});
}
pdfjsLib.getDocument("https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf").promise.then(function (doc) {
var pages = []; while (pages.length < doc.numPages) pages.push(pages.length + 1);
return Promise.all(pages.map(function (num) {
// create a div for each page and build a small canvas for it
var div = document.createElement("div");
div.className = "thumbnail";
div.onclick = thumbnailClick;
$telerik.$(".thumbnailsDiv")[0].appendChild(div);
return doc.getPage(num).then(makeThumb)
.then(function (canvas) {
div.appendChild(canvas);
$telerik.$(div).append("<span style='margin-left: 55px;'>Page " + num + "</span>");
});
}));
}).catch(console.error);
function thumbnailClick() {
var pdfViewerObject = $find("<%=RadPdfViewer1.ClientID %>"); //the standard script control object
var kendoPdfViewerObject = pdfViewerObject.get_kendoWidget(); //the Kendo widget
kendoPdfViewerObject.activatePage($telerik.$(this).index() + 1);
};
Add custom CSS to achieve a smooth appearance:
div.thumbnailsDiv {
height: 600px;
width: 180px;
overflow-y: scroll;
float: left;
}
div.k-pdf-viewer {
position: absolute;
left: 200px;
}
div.thumbnail {
cursor: pointer;
}
div.thumbnail:hover {
opacity: 0.5;
}
The approach above allows the users to scroll through the thumbnails of all pages in the navigation element and activate any desired page in the PdfViewer by clicking on the respective Thumbnail. Have in mind that scrolling in the PdfViewer is independent of scrolling in the thumbnail navigation and vice versa.