Getting Started with the PDFViewer

This guide demonstrates how to get up and running with the Kendo UI for jQuery PDFViewer.

After the completion of this guide, you will be able to achieve the following end result:

    <div id="pdfViewer"></div>
    <script>
      $.when(
        $.getScript("https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.js"),
        $.getScript("https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.worker.js")
        .done(function () {
        window.pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.worker.js';           
      }).then(function(){
        $("#pdfViewer").kendoPDFViewer({
          pdfjsProcessing: {
            file: "https://demos.telerik.com/kendo-ui/content/web/pdfViewer/sample.pdf"
          width: "100%",
          height: 700,
          scale: 1.5
    </script>
1. Create an Empty Div Element
First, create a <div> element on the page—it will serve as the main container of the PDFViewer component.
<div id="pdfViewer"></div>
2. Include Necessary Files
When you use the pdfjsProcessing option to preview a file, the PDF.js library must be included.
<div id="pdfViewer"></div>
<script>
    $.when(
        $.getScript("https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.js"),
        $.getScript("https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.worker.js")
        .done(function () {
        window.pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.worker.js';           
      }).then(function(){
        // initialize the PDFViewer here
</script>
3. Initialize the PDFViewer
In this step, you will initialize the PDFViewer from the <div> element. All settings of the PDFViewer will be provided in the initialization script statement and you have to describe its layout and configuration in JavaScript.
<div id="pdfViewer"></div>
<script>
    // Target the div element by using jQuery and then call the kendoPDFViewer() method.
     $.when(
        $.getScript("https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.js"),
        $.getScript("https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.worker.js")
        .done(function () {
        window.pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.worker.js';           
      }).then(function(){ 
        $("#pdfViewer").kendoPDFViewer({
            pdfjsProcessing: {
                file: "https://demos.telerik.com/kendo-ui/content/web/pdfViewer/sample.pdf"
</script>
4. Width and Height of the PDFViewer
The code below shows how you can define the width and height of the PDFViewer.
<div id="pdfViewer"></div>
<script> 
     $.when(
        $.getScript("https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.js"),
        $.getScript("https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.worker.js")
        .done(function () {
        window.pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.worker.js';           
      }).then(function(){ 
        $("#pdfViewer").kendoPDFViewer({
            pdfjsProcessing: {
                file: "https://demos.telerik.com/kendo-ui/content/web/pdfViewer/sample.pdf"
            width: "100%",
            height: 700,
</script>
5. Set Default Scale
The scale configuration allows you to change the default scale of the document's pages.
<div id="pdfViewer"></div>
<script> 
     $.when(
        $.getScript("https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.js"),
        $.getScript("https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.worker.js")
        .done(function () {
        window.pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.worker.js';           
      }).then(function(){ 
        $("#pdfViewer").kendoPDFViewer({
            pdfjsProcessing: {
                file: "https://demos.telerik.com/kendo-ui/content/web/pdfViewer/sample.pdf"
            width: "100%",
            height: 700,
            scale: 1.5
</script>
Next Steps
Referencing Existing Component Instances 
Demo Page for the PDFViewer
See Also
JavaScript API Reference of the PDFViewer
Knowledge Base Section
          
Progress, Telerik, and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries. See Trademarks for appropriate markings.