ASP.NET MVC PDFViewer Overview

Telerik UI for ASP.NET MVC Ninja image

The PDFViewer is part of Telerik UI for ASP.NET MVC, a professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

The Telerik UI PDFViewer HtmlHelper for ASP.NET MVC is a server-side wrapper for the Kendo UI PDFViewer widget.

The PDFViewer displays PDF files in the browser and consists of a toolbar and a scrollable container that wraps the page elements. The default tools collection includes the pager, open, and download tools. For processing files, it supports the PDF.JS Processing and Telerik DPL Processing libraries. Among the key features the PDFViewer provides are the selection of a PDF processing library, a built-in paging mechanism, virtualization capabilities, a built-in default toolbar collection, and responsive capabilities and page scaling.

Initializing the PDFViewer

You can initialize the PDFViewer from HTML either by using PDF.JS or the Telerik Document Processing library.

Using PDF.JS

The following example demonstrates how to initialize the PDFViewer by using PDF.JS.

    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.js"></script>
    <script>
        window.pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.worker.js';
    </script>

    @(Html.Kendo().PDFViewer()
        .Name("pdfviewer") // The name of the PDFViewer is mandatory. It specifies the "id" attribute of the widget.
        .PdfjsProcessing(pdf => pdf
            .File(Url.Content("~/Content/web/pdfViewer/sample.pdf"))
        )
        .Height(1200)
    )

Using Telerik Document Processing

The following example demonstrates how to initialize the PDFViewer by using the Telerik Document Processing library.

    @(Html.Kendo().PDFViewer()
        .Name("pdfviewer") // The name of the PDFViewer is mandatory. It specifies the "id" attribute of the widget.
        .DplProcessing(dpl => {
            dpl.Read(r => r.Url(Url.Action("GetInitialPdf", "PdfViewer")));
            dpl.Upload(upload => upload.Url(Url.Action("GetPdf", "PdfViewer")).SaveField("file"));
            dpl.LoadOnDemand(true);
        })
        .Toolbar(toolbar =>
            toolbar.Items(items =>
            {
                items.Add().Command("PageChangeCommand").Type("pager").Name("pager");
                items.Add().Name("spacer").Type("spacer");
                items.Add().Command("OpenCommand").Type("button").Name("open").Icon("folder-open");
            })
        )
        .Height(1200)
    )

Functionality and Features

  • PDF.js processing—You can configure the PDFViewer to use the PDF.js library for PDF processing and visualization.
  • DPL processing—The component can use the Telerik Document Processing library to process and visualize a PDF document.
  • Toolbar and tools—The PDFViewer offers diverse tools and commands.
  • Events—To control the behavior of the component upon user interaction, you can use the events that the component emits.

Next Steps

See Also

In this article