New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

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

PdfViewer-getting-started

  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.

In this article