Enterprise-level component library based on Bootstrap and Blazor

star nuget license download repo commit master coverage

Print

Used to print a document or a local view

<body>
    <app>
        @(await Html.RenderComponentAsync<App>(RenderMode.ServerPrerendered))
    </app>
</body>
<PrintButton Icon="fa fa-print" Text="Print" PreviewUrl="/printview" />

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

Print

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 print The button appears in the title bar

By setting up the content components to print, call the print service directly print jobs

Demo
@page "/prints"
@inject IStringLocalizer<Prints> Localizer

<h3>Print</h3>

<h4>Used to print a document or a local view</h4>

<Tips class="mt-3">
    <ul class="ul-demo">
        <li>Set up <code style='margin-left: 14px;' > PreviewUrl </code>, open a new page for print preview and click the print button on this page for page printing</li>
        <li>If you are printing a button in the <code>Dialog </code> component when you do not set the <code>PreviewUrl </code>, the pop-up contents are printed</li>
    </ul>

    <div><b> print the pop-up window </b>, because only the pop-up contents are printed, there are requirements for the <code>_Host.cshtml/index.html</code> page, the code is as follows, and the code generated <code> blazor </code> is hidden when wrapping with <code>app </code> for easy printing</div>
</Tips>

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

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

<DemoBlock Title="Basic usage" Introduction="Print the page by clicking the print button" Name="PrintButton">
    <p>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</p>
    <PrintButton Icon="fa fa-print" Text="Print" PreviewUrl="/printview" />
</DemoBlock>

<DemoBlock Title="Print the bullet window" Introduction="Turn on printing by setting up the <code> ShowPrint </code>" Name="PrintDialog">
    <p>@((MarkupString)Localizer["PrintDialogP", nameof(DataDialogComponent), nameof(DialogOption.ShowPrintButtonInHeader)].Value)</p>
    <Button Icon="fa fa-print" Text="Print" OnClick="OnClickPrint" />
</DemoBlock>

<DemoBlock Title="Print service" Introduction="By setting up the content components to print, call the <b> print service </b> directly print jobs" Name="PrintService">
    <Button Icon="fa fa-print" Text="Print" OnClick="OnClickPrintService" />
</DemoBlock>
// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
// Website: https://www.blazor.zone or https://argozhang.github.io/

using BootstrapBlazor.Components;
using BootstrapBlazor.Shared.Components;
using Microsoft.AspNetCore.Components;
using System;
using System.Collections.Generic;
using System.Diagnostics.CodeAnalysis;
using System.Threading.Tasks;

namespace BootstrapBlazor.Shared.Samples;

/// <summary>
/// 
/// </summary>
public partial class Prints
{
    /// <summary>
    /// 获得 弹窗注入服务
    /// </summary>
    [Inject]
    [NotNull]
    private DialogService? DialogService { get; set; }

    /// <summary>
    /// 获得 弹窗注入服务
    /// </summary>
    [Inject]
    [NotNull]
    private PrintService? PrintService { get; set; }

    private async Task OnClickPrint()
    {
        var op = new DialogOption()
        {
            Title = Localizer["DialogTitle"],
            ShowPrintButton = true,
            ShowPrintButtonInHeader = true,
            ShowFooter = false,
            BodyContext = 1
        };
        op.BodyTemplate = BootstrapDynamicComponent.CreateComponent<DataDialogComponent>(new Dictionary<string, object?>
        {
            [nameof(DataDialogComponent.OnClose)] = new Action(async () => await op.Dialog.Close())
        }).Render();

        await DialogService.Show(op);
    }

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

            // 弹窗组件所需参数
            return new Dictionary<string, object?>
        {
            [nameof(DataDialogComponent.OnClose)] = new Action(async () => await op.Dialog.Close())
        };
    });
}

B 站相关视频链接

暂无

交流群

QQ Group:BootstrapAdmin & Blazor 795206915 675147445 Welcome to join the group discussion
Themes
Bootstrap
Motronic
Ant Design (完善中)
LayUI (完善中)
An error has occurred. This application may no longer respond until reloaded. Reload