DxPdfViewer Class

A component that displays PDF documents directly in the browser.

Namespace: DevExpress.Blazor.PdfViewer

Assembly: DevExpress.Blazor.PdfViewer.v24.1.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

Add a PDF Viewer to a Project

Follow the steps below to add a PDF Viewer component to an application:

1. Use a DevExpress Project Template to create a new Blazor Server or Blazor WebAssembly application. If you use a Microsoft project template or already have a Blazor project, configure your project to incorporate DevExpress Blazor components.
2. Install the DevExpress.Blazor.PdfViewer NuGet package.
   For WebAssembly applications, also install the DevExpress.Pdf.SkiaRenderer NuGet package.

3. Register the DevExpress.Blazor.PdfViewer namespace in the _Imports.razor file:

   _Imports.razor

   @using DevExpress.Blazor.PdfViewer
   

4. Register the DevExpress.Blazor.Reporting.Models namespace to access and modify toolbar settings.

5. Add the following code to the application startup file:

   Program.cs

   var builder = WebApplication.CreateBuilder(args);
   // ...
   builder.Services.AddDevExpressServerSideBlazorReportViewer();
   // ...
   var app = builder.Build();
   

6. Register the PDF Viewer’s CSS file:

   <link rel="stylesheet" href="_content/DevExpress.Blazor.Reporting.Viewer/css/dx-blazor-reporting-components.css">
   

7. Add the following markup to a .razor file: <DxPdfViewer>…</DxPdfViewer>.
8. Specify a document to open.
9. Configure other options (see sections below).

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 PDF Viewer’s built-in toolbar contains commands that allow users to change the document’s zoom level.

To specify the initial zoom level, use the ZoomLevel property. The following code snippet sets the zoom level to 125%:

@using System.Reflection

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

@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);
        }
    }
}

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.

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"
             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;
}

Refer to the following topic for more information: CSS Classes.

Troubleshooting

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

Implements

IComponent

IHandleEvent

IHandleAfterRender

Inheritance

Object

ComponentBase

DxPdfViewer