Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

Print 打印组件

用于打印文档或者局部视图

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

通过点击打印按钮将页面进行打印

Demo

点击下方打印按钮后,弹出新页面进行打印预览,确认无误后点击打印预览页面中的打印按钮进行打印机选择进行打印操作

打印

通过设置弹窗组件 ShowPrint 开启打印功能

Demo

本例中弹窗内容为自定义组件 DataDialogComponent 弹窗自身按钮所在 Footer 被隐藏,所以弹窗内置的 Print 按钮无法显示,设置 ShowPrintButtonInHeader 使 打印 按钮显示在标题栏中

@page "/prints"

<h3>Print 打印组件</h3>

<h4>用于打印文档或者局部视图</h4>

<Tips class="mt-3">
    <ul class="ul-demo">
        <li>设置 <code style="margin-left: 14px;">PreviewUrl</code> 时,单开一个新网页进行打印预览,点击此页面的打印按钮进行网页打印</li>
        <li>不设置 <code>PreviewUrl</code> 时,如果是 <code>Dialog</code> 组件中的打印按钮,则打印弹窗内容</li>
    </ul>

    <div><b>打印弹窗</b>时由于仅打印弹窗内容,所以对 <code>_Host.cshtml/index.html</code> 页面有所要求,代码如下;<code>blazor</code> 生成的代码使用 <code>app</code> 进行包裹方便打印时隐藏这部分</div>
</Tips>

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

<Pre>&lt;PrintButton Icon="fa fa-print" Text="打印" PreviewUrl="/printview" /&gt;</Pre>

<Block Title="普通用法" Introduction="通过点击打印按钮将页面进行打印" Name="PrintButton">
    <p>点击下方打印按钮后,弹出新页面进行打印预览,确认无误后点击打印预览页面中的打印按钮进行打印机选择进行打印操作</p>
    <PrintButton Icon="fa fa-print" Text="打印" PreviewUrl="/printview" />
</Block>

<Block Title="打印弹窗" Introduction="通过设置弹窗组件 <code>ShowPrint</code> 开启打印功能" Name="PrintDialog">
    <p>本例中弹窗内容为自定义组件 <code>@nameof(DataDialogComponent)</code> 弹窗自身按钮所在 <code>Footer</code> 被隐藏,所以弹窗内置的 <code>Print</code> 按钮无法显示,设置 <code>@nameof(DialogOption.ShowPrintButtonInHeader)</code> 使 <b>打印</b> 按钮显示在标题栏中</p>
    <Button Icon="fa fa-print" Text="打印" OnClick="OnClickPrint" />
</Block>

<Dialog />
// 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.Pages.Components;
using Microsoft.AspNetCore.Components;
using System;
using System.Collections.Generic;
using System.Diagnostics.CodeAnalysis;
using System.Threading.Tasks;

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

        private async Task OnClickPrint()
        {
            var op = new DialogOption()
            {
                Title = "数据查询窗口",
                ShowPrintButton = true,
                ShowPrintButtonInHeader = true,
                ShowFooter = false,
                BodyContext = 1
            };
            op.BodyTemplate = BootstrapDynamicComponent.CreateComponent<DataDialogComponent>(new KeyValuePair<string, object>[]
            {
                new(nameof(DataDialogComponent.OnClose), new Action(async () => await op.Dialog.Close()))
            }).Render();

            await DialogService.Show(op);
        }
    }
}

B 站相关视频链接

暂无

交流群

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