DxPdfViewer Class
A component that displays PDF documents directly in the browser.
Namespace: DevExpress.Blazor.PdfViewer
Assembly: DevExpress.Blazor.PdfViewer.v25.1.dll
NuGet Package: DevExpress.Blazor.PdfViewer
Declaration
public class DxPdfViewer :
ComponentBaseRemarks
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.
Add a PDF Viewer to a Project
Follow the steps below to add a PDF Viewer component to an application:
- 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.
Install the
DevExpress.Blazor.PdfViewerNuGet package.Install the
DevExpress.Pdf.SkiaRendererNuGet package for applications on non-windows development machines. For more information, refer to Use Reporting on Linux and macOS.Set the PdfPrintingOptions.RenderingEngine property to Skia for applications on Windows Azure ( see XRPdfContent Control Specifics).
Register the DevExpress.Blazor.PdfViewer namespace in the _Imports.razor file:
@using DevExpress.Blazor.PdfViewer- Register the DevExpress.Blazor.Reporting.Models namespace to access and modify toolbar settings.
Register the PDF Viewer-related services in the Program.cs file:
var builder = WebApplication.CreateBuilder(args); // ... builder.Services.AddDevExpressServerSideBlazorPdfViewer(); // ... var app = builder.Build();Register the PDF Viewer’s CSS file:
<head> <link rel="stylesheet" href=@AppendVersion("_content/DevExpress.Blazor.Viewer/css/dx-blazor-viewer-components.bs5.css")> </head> @code { private string AppendVersion(string path) => $"{path}?v={typeof(DevExpress.Blazor.ResourcesConfigurator).Assembly.GetName().Version}"; }Add the following markup to a
.razorfile:<DxPdfViewer>…</DxPdfViewer>.- Specify a document to open.
- Configure other options (see sections below).
WebAssembly and .NET MAUI Blazor Hybrid Specifics
To use the DevExpress Blazor PDF Viewer in WebAssembly and .NET MAUI Blazor Hybrid applications, complete the following steps:
- Set the PdfPrintingOptions.RenderingEngine property to Skia.
- Install the following NuGet packages:
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 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. 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.
@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);
}
}
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:
@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);
}
}
}
.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.