ASP.NET Core PDFViewer Overview
The PDFViewer is part of Telerik UI for ASP.NET Core, 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 TagHelper and HtmlHelper for ASP.NET Core are server-side wrappers 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 with 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)
)
<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>
<kendo-pdfviewer name="pdfviewer"
height="1200">
<pdfjs-processing file="@(Url.Content("~/shared/web/pdfViewer/sample.pdf"))" />
</kendo-pdfviewer>
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)
)
<kendo-pdfviewer height="1200"
name="pdfviewer">
<dpl-processing load-on-demand="true">
<read url="/PdfViewer/GetInitialPdf" />
<upload url="/PdfViewer/GetPdf" save-field="file" />
</dpl-processing>
<toolbar enabled="true">
<pdfviewer-toolbar-items>
<pdfviewer-toolbar-item command="PageChangeCommand"
type="pager"
name="pager">
</pdfviewer-toolbar-item>
<pdfviewer-toolbar-item name="spacer"
type="spacer">
</pdfviewer-toolbar-item>
<pdfviewer-toolbar-item command="OpenCommand"
type="button"
name="open"
icon="folder-open">
</pdfviewer-toolbar-item>
</pdfviewer-toolbar-items>
</toolbar>
</kendo-pdfviewer>
Functionality and Features
Events
For a complete example on basic PDFViewer events, refer to the demo on using the events of the PDFViewer.