М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 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.
So what should you do to integrate it in your project? Here is a simple step-by-step guide:
- Copy the Viewer.aspx and pdf.js folder from the attached demo to your project
- Use the preferred way to navigate to the Viewer.aspx file (for example, HyperLink, Button and so on)
- Pass the path to the PDF file in the query string by setting it to the filePath parameter
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.
PDF.js @ Mozilla Labs