Displaying PDF document pages as thumbnailsPDF Viewer for ASP.NET MVC does not support displaying thumbnails of the PDF file loaded, however as a workaround, the PDF pages are displayed as thumbnail by exporting the pages as images. Clicking the thumbnail image will navigate to the corresponding page in PDF Viewer.
You can export the Pdf document pages as images using the Syncfusion PDF Base library’s PdfLoadedDocument.ExportAsImage() method. Refer to the following steps to create and display the PDF pages as thumbnail. Step 1: Create the thumbnail pane using the HTML. <div style="width:100%; height:760px;"> <div style="left:2px;"> <div id="thumbnailpane" style="overflow:scroll; width:15%;height:640px"> </div> </div> <div style="left:20%; position: absolute; width:80%; top:50px; height:780px"> <div class="content-container-fluid"> <div class="row"> <div class="cols-sample-area"> <div class="control"> <div id="container"></div> </div> </div> </div> </div> </div> </div> Step 2: Sending AJAX request to create the thumbnail images in the server-side and in the success of the AJAX request, PDF Viewer will be initialized. $.ajax({
url: '../api/PdfViewer/ExportAsImage',
type: 'POST',
dataType: 'json',
crossDomain: true,
traditional: true,
contentType: 'application/json; charset=utf-8',
data: '',
success: function (data) {
thumbnail(data);
//Initializes PDF viewer
$('#container').ejPdfViewer({ serviceUrl: '../api/PdfViewer', documentLoad: 'onDocumentLoad' })
},
error: function (msg, textStatus, errorThrown) {
alert('Exception' + msg.responseText);
}
});
Step 3: Export the PDF pages as images using the PdfLoadedDocument’s ExportAsImage() API. public object ExportAsImage()
{
PdfLoadedDocument loadedDocument = new PdfLoadedDocument(HttpContext.Current.Server.MapPath("~/Data/HTTP Succinctly.pdf"));
//Exports the loaded PDF document to as images
Bitmap[] extportedImages = loadedDocument.ExportAsImage(0, loadedDocument.Pages.Count - 1);
string outputPath = HttpContext.Current.Server.MapPath("~/Images/");
for (int i = 0; i < extportedImages.Length; i++)
{
extportedImages [i].Save(outputPath + "\\Image" + (i + 1) + ".png");
}
string output = (loadedDocument.Pages.Count).ToString();
return output;
}
Step 4: Place the images in the thumbnail pane. function thumbnail(totalpage) {
//Place the exported images in thumbnail pane
var thumbdiv = document.getElementById("thumbnailpane");
for (var i = 1; i <= totalpage; i++) {
var thumbimg = document.createElement('div');
thumbimg.className = 'thumbnail';
var img = document.createElement('img');
img.src = '../images/image' + i + '.png';
thumbimg.onclick = function (e) {
var pagenum = e.currentTarget.id;
gotopage(pagenum);
};
thumbimg.id = i;
thumbimg.appendChild(img);
thumbdiv.appendChild(thumbimg);
}
}
Step 5: Click the thumbnail image to navigate to the corresponding page in PDF Viewer.
function gotopage(pagenum) {
var pdfviewerObject = $('#container').data('ejPdfViewer');
//Navigates to given page number
pdfviewerObject.goToPage(pagenum);
}
Sample: Executing the previously given sample will provide the output as follows. Clicking the thumbnail image will display the corresponding page in PDF Viewer.
You can find the PDF Viewer’s other options like adding Toolbar Customization, TextMarkup annotation, and Handwritten Signature features here with code examples.
Refer here to explore the rich set of PDF Viewer features.
An online demo link to view PDF documents using Syncfusion PDF Viewer.
See Also: https://www.syncfusion.com/jquery/aspnet-web-forms-ui-controls/pdf-viewer https://www.syncfusion.com/jquery/javascript-ui-controls/pdf-viewer https://www.syncfusion.com/uwp-ui-controls/pdf-viewer https://www.syncfusion.com/winforms-ui-controls/pdf-viewer https://www.syncfusion.com/wpf-ui-controls/pdf-viewer
|
2X faster development
The ultimate ASP.NET MVC UI toolkit to boost your development speed.
This page will automatically be redirected to the sign-in page in 10 seconds.
You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.
