New to Telerik UI for ASP.NET AJAX? Start a 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
-
Add a ScriptManager control on a Web Form.
-
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>
-
Add a RadPdfViewer control to the page, and set its properties:
PdfjsProcessingSettings
- specify the desired PDF.js settings, like theFile
which will be loaded.Scale
- you can set the initial scale level of the pages here.- Set other properties like
ActivePage
,Height
andWidth
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.