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 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
- 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
- Getting Started with the PDFViewer
- Basic Usage of the PDFViewer HtmlHelper and TagHelper for ASP.NET Core (Demo)
- Using the PDFViewer with the Telerik Document Processing library (Demo)