Blazor PdfViewer Overview
The Pdf Viewer for Blazor allows users to open PDF files directly in the browser. The component provides features such as paging, zooming, printing, text selection and search. In addition, users can upload and display a PDF file from their local device, or download the currently open file.
The PDF Viewer component is part of Telerik UI for Blazor, a
professional grade UI library with 110+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
Creating Blazor PdfViewer
To use a Telerik Blazor PDF Viewer:
- Add the
TelerikPdfViewertag. - Set the
Dataparameter to a byte array (byte[]) that holds the PDF file contents. - If you are developing a Blazor Server app, increase the maximum SignalR message size.
- (optional) Subscribe to the PDF Viewer's events. For example, use the
OnDownloadevent to set the name of the downloaded file. - (optional) Set
WidthorHeightfor the component.
Basic Blazor PDF Viewer
<TelerikPdfViewer Data="@PdfSource"
OnDownload="@OnPdfDownload"
Height="600px">
</TelerikPdfViewer>
@code {
private byte[] PdfSource { get; set; }
private async Task OnPdfDownload(PdfViewerDownloadEventArgs args)
{
args.FileName = "PDF-Viewer-Download";
}
protected override void OnInitialized()
{
PdfSource = Convert.FromBase64String(PdfBase64);
base.OnInitialized();
}
private const string PdfBase64 = "JVBERi0xLjEKMSAwIG9iajw8L1R5cGUvQ2F0YWxvZy9QYWdlcyAyIDAgUj4+ZW5kb2JqCjIgMCBvYmo8PC9UeXBlL1BhZ2VzL0tpZHNbMyAwIFJdL0NvdW50IDEvTWVkaWFCb3ggWy00MCAtNjQgMjYwIDgwXSA+PmVuZG9iagozIDAgb2JqPDwvVHlwZS9QYWdlL1BhcmVudCAyIDAgUi9SZXNvdXJjZXM8PC9Gb250PDwvRjE8PC9UeXBlL0ZvbnQvU3VidHlwZS9UeXBlMS9CYXNlRm9udC9BcmlhbD4+ID4+ID4+L0NvbnRlbnRzIDQgMCBSPj5lbmRvYmoKNCAwIG9iajw8L0xlbmd0aCA1OT4+CnN0cmVhbQpCVAovRjEgMTggVGYKMCAwIFRkCihUZWxlcmlrIFBkZlZpZXdlciBmb3IgQmxhem9yKSBUagpFVAplbmRzdHJlYW0KZW5kb2JqCnhyZWYKMCA1CjAwMDAwMDAwMDAgNjU1MzUgZgowMDAwMDAwMDIxIDAwMDAwIG4KMDAwMDAwMDA4NiAwMDAwMCBuCjAwMDAwMDAxOTUgMDAwMDAgbgowMDAwMDAwNDkwIDAwMDAwIG4KdHJhaWxlciA8PCAgL1Jvb3QgMSAwIFIgL1NpemUgNSA+PgpzdGFydHhyZWYKNjA5CiUlRU9G";
}
Toolbar
The PdfViewer toolbar can render built-in and custom tools. The default tools enable built-in features such as:
- Page, zoom and pan documents
- Search and select text
- Print, download and open local PDF files
Annotations
The PdfViewer provides a built-in option for creating and editing annotations. Explore the available annotation types and how to work with them.
Large File Support
In Blazor Server apps, the PDF Viewer uses the SignalR WebSocket to:
- Open PDF files from the server and send them to the browser.
- Read the PDF file
Streamfrom the user device in theOnOpenevent handler. The PDF Viewer uses internally a FileSelect component to get the user file.
The SignalR WebSocket has a default maximum message size of 32 KB. To work with larger files in the above two scenarios, increase the max WebSocket message size for the Blazor application.
PdfViewer Parameters
The table below lists the PDF Viewer parameters. Also check the PDF Viewer API Reference for all parameters, methods and events.
| Parameter | Type and Default Value | Description |
|---|---|---|
Class |
string |
An additional CSS class for the <div class="k-pdf-viewer"> element. Use it to customize the component styles and override the theme. |
Data |
byte[] |
The source of the currently displayed PDF file. |
EnableLoaderContainer |
bool ( true) |
Determines if the PDF Viewer will show a loading animation during opening, downloading or zooming a PDF file. |
Height |
string |
The PdfViewer height as a CSS length value. If not set, the component will expand vertically, based on the loaded file. Height is required for the component paging and scrolling to work. |
MaxZoom |
decimal ( 4m) |
The largest possible zoom level. The default value allows zooming in 4 times (400%). |
MinZoom |
decimal ( 0.5m) |
The smallest possible zoom level. The default value allows zooming out to 50%. |
Width |
string |
The PdfViewer width as a CSS length value. If not set, the component will expand horizontally to fill its parent. |
Zoom |
decimal ( 1.25m) |
The current zoom level. Use the parameter with two-way binding or with a ZoomChanged event handler. |
ZoomRate |
decimal ( 0.25m) |
The zoom level change that is used by the zoom in and zoom out buttons. |
PdfViewer Reference and Methods
The PdfViewer exposes methods for programmatic operation. To use them, define a reference to the component instance with the @ref directive attribute.
| Method | Description |
|---|---|
Print |
Prints the loaded PDF document as an alternative to the built-in Print button in the PDF Viewer toolbar. |
Rebind |
Refreshes the PDF Viewer and ensures it is displaying the latest file Data. Rebind is necessary when the Blazor framework cannot re-render components automatically. |
PDF Viewer reference and method usage
<TelerikPdfViewer @ref="@PdfViewerRef"
Data="@PdfSource">
<PdfViewerToolBar>
<PdfViewerToolBarCustomTool>
<TelerikButton OnClick="@OnButtonClick" Icon="@SvgIcon.ArrowRotateCw">Rebind PDF Viewer</TelerikButton>
</PdfViewerToolBarCustomTool>
</PdfViewerToolBar>
</TelerikPdfViewer>
@code {
private TelerikPdfViewer PdfViewerRef { get; set; }
private async Task OnButtonClick()
{
PdfViewerRef.Rebind();
}
private byte[] PdfSource
{
get
{
return System.Text.Encoding.UTF8.GetBytes(
PdfSourceRaw.Replace("...",
PdfUpdateFlag ? "updated at " + DateTime.Now.ToLongTimeString() : "")
);
}
}
protected override async Task OnInitializedAsync()
{
PdfSourceRaw = System.Text.Encoding.UTF8.GetString(Convert.FromBase64String(PdfBase64));
await Task.Delay(1000);
// PdfUpdateFlag is used in the PdfSource getter to make the document change more obvious
PdfUpdateFlag = true;
PdfViewerRef.Rebind();
await base.OnInitializedAsync();
}
private bool PdfUpdateFlag { get; set; }
private string PdfSourceRaw { get; set; }
private const string PdfBase64 = "JVBERi0xLjEKMSAwIG9iajw8L1R5cGUvQ2F0YWxvZy9QYWdlcyAyIDAgUj4+ZW5kb2JqCjIgMCBvYmo8PC9UeXBlL1BhZ2VzL0tpZHNbMyAwIFJdL0NvdW50IDEvTWVkaWFCb3ggWy0zMCAtNjQgMjcwIDgwXSA+PmVuZG9iagozIDAgb2JqPDwvVHlwZS9QYWdlL1BhcmVudCAyIDAgUi9SZXNvdXJjZXM8PC9Gb250PDwvRjE8PC9UeXBlL0ZvbnQvU3VidHlwZS9UeXBlMS9CYXNlRm9udC9BcmlhbD4+ID4+ID4+L0NvbnRlbnRzIDQgMCBSPj5lbmRvYmoKNCAwIG9iajw8L0xlbmd0aCA1OT4+CnN0cmVhbQpCVAovRjEgMTggVGYKMCAwIFRkCihQREYgRmlsZSAuLi4pIFRqCkVUCmVuZHN0cmVhbQplbmRvYmoKeHJlZgowIDUKMDAwMDAwMDAwMCA2NTUzNSBmCjAwMDAwMDAwMjEgMDAwMDAgbgowMDAwMDAwMDg2IDAwMDAwIG4KMDAwMDAwMDE5NSAwMDAwMCBuCjAwMDAwMDA0OTAgMDAwMDAgbgp0cmFpbGVyIDw8ICAvUm9vdCAxIDAgUiAvU2l6ZSA1ID4+CnN0YXJ0eHJlZgo2MDkKJSVFT0Y=";
}