Getting Started with the Telerik WebForms PDFViewer

The following tutorial demonstrates how you can add a RadPdfViewer control populated with static items. The end result will be similar to Figure 1:

Figure 1: Basic RadPdfViewer configuration with static items

1. Add a ScriptManager control on a Web Form.

2. Register the Pdf.js library on the page:

   JavaScript

   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.js"></script>
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.worker.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>
   

3. Add a RadPdfViewer control to the page, and set its properties:

   • PdfjsProcessingSettings - specify the desired PDF.js settings, like the File which will be loaded.
   • Scale - you can set the initial scale level of the pages here.
   • Set other properties like ActivePage, Height and Width to control its appearance as desired.

   The end result should be similar to the following:

   ASPX

       <telerik:RadPdfViewer runat="server" ID="RadPdfViewer1" RenderMode="Lightweight" Height="550px" Width="900px" Scale="1.5" ActivePage="3" >
           <PdfjsProcessingSettings File="Document1.pdf">
           </PdfjsProcessingSettings>
       </telerik:RadPdfViewer>
   

Ideas on how to set up the content of RadPdfViewer you can find in the 5 Different Approaches of Setting up the Content in RadPdfViewer blog post.