Reporting PDF export

Reporting uses the Blazorise PDF engine internally for generation and lets applications choose how PDF previews are rendered.

PDF preview and download

Enable PDF as a preview format and provide a PdfPreviewTemplate to render the generated document with Blazorise PdfViewer or another PDF viewer.

Reporting does not depend on a specific viewer. The example uses the optional Blazorise PdfViewer package and receives the PDF content, data URL, file name, permissions, and download callback through ReportPdfPreviewContext. The report status bar displays progress for data-source resolution, PDF construction and rendering, preview preparation, and browser download handoff. Handle PdfProgressed to receive the same reusable ReportProgress updates in application code. Indeterminate operations expose no percentage; page rendering exposes measured progress through the Completed and Total values.

Reports can include images and custom fonts in their PDF output. Without additional setup, an image must contain a base64 data URL and a custom font must be supplied as data or as a file that the application can read. If a report instead points to an image or font URL, enable URL loading as described in the Blazorise PDF setup guide.

No provider settings defined.

Fields
Source Fields
Formula Fields
Running Total Fields
Special Fields
Functions
Additional Functions
Text
Math
Date and time
Aggregates
Operators
Arithmetic
Boolean
Comparisons
Control Structures
Item Formula
Description Select a field, function, or operator to insert it into the formula.
<Report Data="@invoice"
        Editable
        PreviewFormats="ReportPreviewFormat.Html | ReportPreviewFormat.Pdf">
    <ReportViewer PreviewFormat="ReportPreviewFormat.Html | ReportPreviewFormat.Pdf"
                  DefaultPreviewFormat="ReportPreviewFormat.Pdf"
                  AllowDownload
                  AllowPrint>
        <PdfPreviewTemplate Context="preview">
            <PdfViewerContainer Height="Height.Rem( 48 )">
                <PdfViewerToolbar ShowPrinting="@preview.AllowPrint"
                                  ShowDownloading="@preview.AllowDownload" />
                <PdfViewer Source="@preview.DataUrl"
                           Mode="PdfViewerMode.Continuous"
                           DownloadFileName="@preview.FileName" />
            </PdfViewerContainer>
        </PdfPreviewTemplate>
    </ReportViewer>
    <ReportToolbar>
        <ReportToolbarGroup>
            <ReportToolbarPanesMenu />
        </ReportToolbarGroup>
        <ReportToolbarGroup>
            <ReportToolbarItem Command="ReportCommand.PreviewHtml" Caption="HTML Preview" />
            <ReportToolbarItem Command="ReportCommand.PreviewPdf" Caption="PDF Preview" />
            <ReportToolbarItem Command="ReportCommand.DownloadPdf" Caption="Download PDF" />
        </ReportToolbarGroup>
        <Div Margin="Margin.IsAuto.FromStart">
            <ReportToolbarGroup>
                <ReportToolbarItem Command="ReportCommand.Design" Caption="Design" ShowCaption />
                <ReportToolbarItem Command="ReportCommand.Preview" Caption="Preview" ShowCaption />
            </ReportToolbarGroup>
        </Div>
    </ReportToolbar>
    <ReportDataSources>
        <ReportObjectDataSource Name="Invoice" Data="@invoice" />
    </ReportDataSources>
    <ReportPage Name="Invoice">
        <ReportHeader Name="PDF export header" Height="84">
            <ReportText Text="PDF export invoice" X="30" Y="18" Width="240" Height="24" FontSize="20" Bold FontColor="@ReportColors.Blue" />
            <ReportText Text="{Customer.Name}" X="30" Y="48" Width="240" Height="18" />
            <ReportText Text="{Header.Number}" X="405" Y="48" Width="105" Height="18" TextAlignment="TextAlignment.End" />
        </ReportHeader>
        <ReportPageHeader Name="Column headers" Height="32">
            <ReportText Text="Description" X="30" Y="8" Width="270" Height="18" Bold />
            <ReportText Text="Total" X="420" Y="8" Width="90" Height="18" Bold TextAlignment="TextAlignment.End" />
        </ReportPageHeader>
        <ReportDetail Name="Invoice lines" Height="30" DataSource="Invoice.Lines">
            <ReportField Field="Description" X="30" Y="6" Width="270" Height="18" />
            <ReportField Field="Total" Format="@ReportFormats.Currency()" X="420" Y="6" Width="90" Height="18" FontColor="@ReportColors.Green" />
        </ReportDetail>
        <ReportFooter Name="Invoice footer" Height="45">
            <ReportLine X="30" Y="6" Width="480" Height="8" Thickness="1" />
            <ReportText Text="Invoice total" X="300" Y="18" Width="105" Height="18" Bold />
            <ReportField Field="Header.Total" Format="@ReportFormats.Currency()" X="420" Y="18" Width="90" Height="18" Bold FontColor="@ReportColors.Green" />
        </ReportFooter>
    </ReportPage>
</Report>

@code {
    private readonly InvoiceReportModel invoice = new()
    {
        Header = new()
        {
            Number = "INV-1001",
            Total = 1240.50m,
        },
        Customer = new()
        {
            Name = "Northwind Traders",
        },
        Lines =
        [
            new() { Description = "Implementation workshop", Total = 640.50m },
            new() { Description = "Reporting module license", Total = 500.00m },
            new() { Description = "Priority support", Total = 100.00m },
        ],
    };

    private sealed class InvoiceReportModel
    {
        public InvoiceHeaderModel Header { get; set; }

        public InvoiceCustomerModel Customer { get; set; }

        public List<InvoiceLineModel> Lines { get; set; } = [];
    }

    private sealed class InvoiceHeaderModel
    {
        public string Number { get; set; }

        public decimal Total { get; set; }
    }

    private sealed class InvoiceCustomerModel
    {
        public string Name { get; set; }
    }

    private sealed class InvoiceLineModel
    {
        public string Description { get; set; }

        public decimal Total { get; set; }
    }
}

Fonts

Register fonts when PDF export must use the same font family as the designer and HTML preview.

Place font files under wwwroot/fonts, load the font bytes during application startup, and register the font family with Blazorise. Use the same family name from report elements through the FontFamily parameter or from the designer font selector. 

byte[] interRegularBytes = await File.ReadAllBytesAsync( "wwwroot/fonts/Inter-Regular.ttf" );

builder.Services
    .AddBlazorise( options =>
    {
        options.Fonts.Add( new()
        {
            Name = "Inter",
            DisplayName = "Inter",
            CssFamily = "\"Inter\", sans-serif",
            Regular = FontSource.FromBytes( interRegularBytes, FontFormat.TrueType ),
        } );
    } )
    .AddBlazoriseReporting();

Browser rendering also needs a matching @font-face rule. This keeps the designer, HTML preview, and PDF export aligned around the same family name. 

@font-face {
    font-family: "Inter";
    src: url("fonts/Inter-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.

On this page