DxPdfViewer Class

A component that displays PDF documents directly in the browser.

Namespace: DevExpress.Blazor.PdfViewer

Assembly: DevExpress.Blazor.PdfViewer.v25.2.dll

NuGet Package: DevExpress.Blazor.PdfViewer

Declaration

public class DxPdfViewer :
    ComponentBase

Remarks

DevExpress PDF Viewer for Blazor (<DxPdfViewer>) can display a PDF document directly in your DevExpress Blazor application. The component allows you to navigate through individual pages, set zoom level, print and download the document. The PDF Viewer also supports single-page preview functionality and allows you to customize the built-in toolbar.

Run Demo: PDF Viewer - Overview

Get Started

Use the following guide to create your first project:

Read Tutorial: Get Started with Blazor PDF Viewer

API Reference

Refer to the following list for the component API reference: DxPdfViewer Members.

Static Render Mode Specifics

Blazor PDF Viewer does not support static render mode. Enable interactivity to use the component in your application. Refer to the following topic for more details: Enable Interactive Render Mode.

Open a PDF Document

Assign the binary content of a PDF document to the DocumentContent property to open the document in the PDF Viewer:

@using System.Reflection

<DxPdfViewer @ref="pdfViewer"
             DocumentContent="@DocumentContent" />

@code {
    DxPdfViewer pdfViewer { get; set; }
    byte[] DocumentContent { get; set; }

    protected override async Task OnInitializedAsync() {
        Assembly assembly = Assembly.GetExecutingAssembly();
        Stream stream = assembly.GetManifestResourceStream("Pdf.DataSources.Document.pdf");

        using (var binaryReader = new BinaryReader(stream)) {
            DocumentContent = binaryReader.ReadBytes((int)stream.Length);
        }
    }
}

Single-Page Preview

If your PDF document contains multiple pages, <PdfViewer> displays all those pages in a preview.

To preview one page at a time, enable the IsSinglePagePreview property:

@using System.Reflection

<DxPdfViewer @ref="pdfViewer"
             DocumentContent="@DocumentContent"
             IsSinglePagePreview="true" />

@code {
    DxPdfViewer pdfViewer { get; set; }
    byte[] DocumentContent { get; set; }

    protected override async Task OnInitializedAsync() {
        Assembly assembly = Assembly.GetExecutingAssembly();
        Stream stream = assembly.GetManifestResourceStream("Pdf.DataSources.Document.pdf");

        using (var binaryReader = new BinaryReader(stream)) {
            DocumentContent = binaryReader.ReadBytes((int)stream.Length);
        }
    }
}

Document Navigation

Users can click the PDF Viewer’s toolbar commands to navigate through document pages.

In code, you can use ActivePageIndex and PageCount properties to obtain information about the current document’s pages.

Document Adjustment

The DevExpress PDF Viewer allows you to zoom documents in and out both in UI and code. Users can change a document’s zoom level using built-in toolbar commands.

You can use the ZoomLevel property to zoom documents in code. To respond to zoom level changes, handle the ZoomLevelChanged event.

The following code snippet displays a message when users change a document’s zoom level:

<div><b>@ZoomLevelInfo</b></div>

<DxPdfViewer DocumentContent="DocumentContent"
             ZoomLevel="@ZoomLevel"
             ZoomLevelChanged="@OnZoomLevelChanged"/>

@code {
    byte[]? DocumentContent { get; set; }
    double ZoomLevel { get; set; } = 1;
    string ZoomLevelInfo { get; set; } = "Zoom Level is 1";
    string DocumentSource = "SampleApp.Documents.Invoice.pdf";

    protected override async Task OnInitializedAsync() {
        await base.OnInitializedAsync();

        await using Stream stream =
            System.Reflection.Assembly.GetExecutingAssembly()
            .GetManifestResourceStream(DocumentSource)
            ?? throw new InvalidOperationException("Resource not found.");
        using MemoryStream ms = new();
        await stream.CopyToAsync(ms);
        DocumentContent = ms.ToArray();
    }

    void OnZoomLevelChanged(double newZoomLevel) {
        ZoomLevelInfo = "Zoom level was changed from " + ((decimal)ZoomLevel)
                         + " to " + ((decimal)newZoomLevel);
        ZoomLevel = newZoomLevel;
    }
}

Download and Print Support

The PDF Viewer’s built-in toolbar contains commands that allow users to print and download the document.

In code, you can call PrintAsync() and DownloadAsync() methods to print and download the document. Use the DocumentName property to specify the name of the downloaded document.

The following code snippet removes all predefined commands from the PDF Viewer’s toolbar and adds two custom buttons:

• The Print button invokes the Print dialog.
• The Download button downloads the document.

Razor

@using System.Reflection
@using DevExpress.Blazor.Reporting.Models

<DxPdfViewer @ref="pdfViewer"
             DocumentContent="@DocumentContent"
             DocumentName="Custom name"
             CustomizeToolbar="OnCustomizeToolbar" />

@code {
    DxPdfViewer pdfViewer { get; set; }
    byte[] DocumentContent { get; set; }

    protected override async Task OnInitializedAsync() {
        Assembly assembly = Assembly.GetExecutingAssembly();
        Stream stream = assembly.GetManifestResourceStream("Pdf.DataSources.Document.pdf");

        using (var binaryReader = new BinaryReader(stream)) {
            DocumentContent = binaryReader.ReadBytes((int)stream.Length);
        }
    }
    protected void OnCustomizeToolbar(ToolbarModel toolbarModel) {
        toolbarModel.AllItems.Clear();

        var printToolbarItem = new ToolbarItem {
            Text = "Print",
            AdaptiveText = "Print",
            BeginGroup = true,
            Id = "Print",
            IconCssClass = "print-btn",
            Click = async (args) => {
                await pdfViewer.PrintAsync();
            }
        };

        var downloadToolbarItem = new ToolbarItem {
            Text = "Download",
            AdaptiveText = "Download",
            BeginGroup = true,
            Id = "Download",
            IconCssClass = "download-btn",
            Click = async (args) => {
                await pdfViewer.DownloadAsync();
            }
        };
        toolbarModel.AllItems.Add(printToolbarItem);
        toolbarModel.AllItems.Add(downloadToolbarItem);
    }
}

CSS

.print-btn {
    mask-image: url(/images/printer.svg);
    mask-repeat: no-repeat;
    mask-size: 100%;
    background-color: currentColor;
    --toolbar-icon-size: 25px;
}

.download-btn {
    mask-image: url(/images/download.svg);
    mask-repeat: no-repeat;
    mask-size: 100%;
    background-color: currentColor;
    --toolbar-icon-size: 25px;
}

Toolbar Customization

<DxPdfViewer> allows you to access and modify the built-in toolbar. Handle the CustomizeToolbar event to perform the following operations:

• Access toolbar items.
• Add predefined and custom items to the item collection.
• Remove items from the item collection.
• Customize items.

Component Customization

This section describes settings that allow you to customize the appearance of the PDF Viewer component.

Size

Use the SizeMode property to specify the size of the PDF Viewer component. The following code snippet applies the Small mode:

@using System.Reflection

<DxPdfViewer @ref="pdfViewer"
             DocumentContent="@DocumentContent"
             SizeMode="SizeMode.Small"/>

@code {
    DxPdfViewer pdfViewer { get; set; }
    byte[] DocumentContent { get; set; }

    protected override async Task OnInitializedAsync() {
        Assembly assembly = Assembly.GetExecutingAssembly();
        Stream stream = assembly.GetManifestResourceStream("PdfSample.DataSources.Invoice.pdf");

        using (var binaryReader = new BinaryReader(stream)) {
            DocumentContent = binaryReader.ReadBytes((int)stream.Length);
        }
    }
}

CSS Customization

Use the CssClass property to customize the appearance of the PDF Viewer component. The following code snippet configures the component size and customizes border settings:

Razor

@using System.Reflection

<DxPdfViewer @ref="pdfViewer"
             CssClass="component-class"
             DocumentContent="@DocumentContent" />

@code {
    DxPdfViewer pdfViewer { get; set; }
    byte[] DocumentContent { get; set; }

    protected override async Task OnInitializedAsync() {
        Assembly assembly = Assembly.GetExecutingAssembly();
        Stream stream = assembly.GetManifestResourceStream("Pdf.DataSources.Document.pdf");

        using (var binaryReader = new BinaryReader(stream)) {
            DocumentContent = binaryReader.ReadBytes((int)stream.Length);
        }
    }
}

CSS

.component-class {
    height: 500px;
    margin-top: 50px;
    border: solid purple 1px;
}

Troubleshooting

If a Blazor application throws unexpected exceptions, refer to the following help topic: Troubleshooting.

Implements

IComponent

IHandleEvent

IHandleAfterRender

Inheritance

Object

ComponentBase

DxPdfViewer