Building an ASP.NET PDF Viewer with Telerik Window Control and PDF.js

Мany of you have asked about a PDF viewer control you could integrate into your projects. The old trick of showing the PDF file in RadWindow directly is still useful for most cases, but today I’m going to show you something even more practical. As you have already guessed by the blog post title, I’m talking about integrating RadWindow with PDF.js.

 

PDF.js is a general-purpose, web-standards-based JavaScript library for parsing and rendering PDF files. The most important benefit in my opinion is that you can display PDF files to your customers without having to worry whether they have a local PDF viewer installed on their machine.

PDF.js is HTML5 based and works best on Firefox, Safari, and Opera. IE 8 and previous versions are not supported. For more information see the following link:
PDF.js Browser Support.

Step-by-Step Setup

So what should you do to integrate it in your project? Here is a simple step-by-step guide:

1. Copy the Viewer.aspx and pdf.js folder from the attached demo to your project
2. Use the preferred way to navigate to the Viewer.aspx file (for example, HyperLink, Button and so on)
3. Pass the path to the PDF file in the query string by setting it to the filePath parameter

That’s all.

The Example

There is a sample project (runnable website) attached to this blog post. Click here for download [UPDATED 12.Feb.2015]. The setup involves three Telerik controls - ListView, Rotator, and Window. The first two are bound to a simple datasource and display thumbnails of the PDF files that will open in the Window control on click.

[12.Feb.2015] I have updated the demo with the following changes:

• added the latest version of pdf.js
• included an option to generate a PDF file with PdfProcessing
• made some minor design improvements
• optimized the PDF file to further reduce their size

I know this is a hot topic so I hope the blog post is useful for you. Should you have any questions or suggestions let me know in the comments section below.

Additional resources:
PDF.js @ Mozilla Labs
RadRotator documentation
RadListView documentation
RadWindow documentation