问题详情
96 | 清风大侠
如何开发一个表单的打印功能
  • 在页面中添加一个打印按钮,方法如下
[Route("/test")]
public class TestList : BaseTablePage<TbTest>
{
    public async void Print(TbTest row) => await JS.PrintAsync<TestPrint>(f => f.Set(c => c.Model, row));
}
  • 添加打印组件,C#razor语法都支持,注意组件样式必须写在一起
@inherits ComponentBase

<style>
    .demo-print {position:relative;}
    .demo-print .title {font-size:1.5rem;font-weight:bold;text-align:center;}
</style>
<div class="demo-print">
    <div class="title">XXX公司申请单</div>
    <div class="content">@Model.BizContent</div>
</div>

@code {
    // 添加表单的数据参数
    [Parameter] public TbTest Model { get; set; }
}
class TestPrint : ComponentBase
{
    // 添加表单的数据参数
    [Parameter] public TbTest Model { get; set; }

    protected override void BuildRenderTree(RenderTreeBuilder builder)
    {
        BuildStyle(builder);// 构建样式
        BuildForm(builder); // 构建表单
    }

    private static void BuildStyle(RenderTreeBuilder builder)
    {
        builder.Markup(@"<style>
.demo-print {position:relative;}
.demo-print .title {font-size:1.5rem;font-weight:bold;text-align:center;}
</style>");
    }

    private void BuildForm(RenderTreeBuilder builder)
    {
        builder.Div("demo-print", () =>
        {
            builder.Div("title", "XXX公司申请单");
            builder.Div("content", Model.BizContent);
        });
    }
}
回复列表

暂无数据