Bootstrap Blazor enterprise-level UI component library

Enterprise-level component library based on Bootstrap and Blazor

Print

Used to print a document or a local view

Tips

Set up PreviewUrl, open a new page for print preview and click the print button on this page for page printing
If you are printing a button in the Dialog component when you do not set the PreviewUrl, the pop-up contents are printed

<body>
    <app>
        @(await Html.RenderComponentAsync<App>(RenderMode.ServerPrerendered))
    </app>
</body>

<PrintButton Icon="fa-solid fa-print" Text="Print" PreviewUrl="/printview" />

Basic usage

Print the page by clicking the print button

Demo

After clicking the print button below, a new page pops up for print preview, confirms that it is correct, and then clicks the print button in the print preview page for printer selection

@inject IStringLocalizer<BootstrapBlazor.Shared.Samples.Prints> Localizer

<PrintButton Icon="fa-solid fa-print" Text="@Localizer["PrintsButtonText"]" PreviewUrl="/printview" />

Print the bullet window

Turn on printing by setting up the ShowPrint

Demo

In this example, the pop-up window content is a custom component DataDialogComponent the Footer where the button itself is located is hidden, so the Print button built into the pop-up window cannot be displayed, and setting the ShowPrintButtonInHeader makes the printThe button appears in the title bar

@inject IStringLocalizer<BootstrapBlazor.Shared.Samples.Prints> Localizer
@inject DialogService DialogService

<Button Icon="fa-solid fa-print" Text="@Localizer["PrintsButtonText"]" OnClick="OnClickPrint" />

@code {
    private async Task OnClickPrint()
    {
        var op = new DialogOption()
        {
            Title = Localizer["PrintsDialogTitle"],
            ShowPrintButton = true,
            ShowPrintButtonInHeader = true,
            ShowFooter = false,
            BodyContext = 1
        };
        op.Component = BootstrapDynamicComponent.CreateComponent<DataDialogComponent>();

        await DialogService.Show(op);
    }
}

Print service

By setting up the content components to print, call the print servicedirectly print jobs

Demo

@inject IStringLocalizer<BootstrapBlazor.Shared.Samples.Prints> Localizer
@inject DialogService DialogService
@inject PrintService PrintService

<Button Icon="fa-solid fa-print" Text="@Localizer["PrintsButtonText"]" OnClick="OnClickPrintService" />

@code {
    private Task OnClickPrintService() => PrintService.PrintAsync<DataDialogComponent>(op =>
    {
        // 弹窗配置
        op.Title = Localizer["PrintsDialogTitle"];
        op.ShowPrintButton = true;
        op.ShowPrintButtonInHeader = true;
        op.ShowFooter = false;
        op.BodyContext = 2;

        // 弹窗组件所需参数
        return new Dictionary<string, object?>();
    });
}

B station related video link

交流群

QQ Group：BootstrapAdmin & Blazor 795206915 675147445 Welcome to join the group discussion

Print

Used to print a document or a local view

Tips

Demo

Demo

Demo

Bootstrap Blazor Component library updated to 7.4.4-beta01