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.

Telerik UI for Blazor Ninja image

The PDF Viewer component is part of Telerik UI for Blazor, a professional grade UI library with 100 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 PDF Viewer for Blazor:

  1. Add the TelerikPdfViewer tag.
  2. Set the Data parameter to a byte array (byte[]) that holds the PDF file contents.
  3. If you are developing a Blazor Server app, increase the maximum SignalR message size.
  4. (optional) Subscribe to the PDF Viewer's events. For example, use the OnDownload event to set the name of the downloaded file.
  5. (optional) Set Width or Height for 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

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 Stream from the user device in the OnOpen event 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
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 Rebind method usage

<TelerikPdfViewer @ref="@PdfViewerRef"
                  Data="@PdfSource">
    <PdfViewerToolBar>
        <PdfViewerToolBarCustomTool>
            <TelerikButton OnClick="@OnButtonClick" Icon="refresh">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=";
}

Next Steps

See Also

In this article