PDFViewer HtmlHelper Overview

The PDFViewer HtmlHelper extension is a server-side wrapper for the Kendo UI PDFViewer widget.

The Kendo UI PDFViewer displays PDF files in the browser. It provides flexibility to choose the PDF library to be used for processing the file:

The PDFViewer consists of a toolbar and a scrollable container that wraps the page elements. Default tools collection includes pager, open and download tool.

Key Features

  • Allows you to choose the PDF processing lib
  • Provides built-in paging mechanism
  • Has virtualization capabilities
  • Provides built-in default toolbar collection
  • Has responsive capabilities and page scaling

Getting Started

Initialization

While initializing the widget using the HTML helper, choose the PDF processing library and setup its settings. You could initialize the widgets using PDF.JS:

Example
    <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)
    )

or using the Telerik Document Processing library:

Example
    @(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)
    )

See also

In this article
Not finding the help you need? Improve this article