blazor-devexpress-dot-blazor-dot-pdfviewer.md
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
public class DxPdfViewer :
ComponentBase
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
Use the following guide to create your first project:
Read Tutorial: Get Started with Blazor PDF Viewer
Refer to the following list for the component API reference: DxPdfViewer Members.
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.
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);
}
}
}
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);
}
}
}
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.
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);
}
}
}
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:
@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);
}
}
.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;
}
<DxPdfViewer> allows you to access and modify the built-in toolbar. Handle the CustomizeToolbar event to perform the following operations:
This section describes settings that allow you to customize the appearance of the PDF Viewer component.
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);
}
}
}
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;
}
If a Blazor application throws unexpected exceptions, refer to the following help topic: Troubleshooting.
Object ComponentBase DxPdfViewer
See Also