打印模板

概述

打印模板就是一个可视化的报表设计器，基于 TinyMCE 富文本编辑器，拖拽式设计模板，支持页眉页脚、两列布局、一对多子表格这些高级功能。设计好的模板，在列表页或者详情页一键就能打印。

功能特性

可视化设计：基于 TinyMCE，所见即所得
拖拽字段：左边字段树拖到编辑器里就行
字段类型支持：
- 普通字段（字符串、数字、日期等）
- 内置变量（RowNumber、CurrentDate）
- ManyToOne 导航属性（比如 UserName → NickName）
- OneToMany / ManyToMany 集合导航（自动渲染成子表格）
页眉/页脚：工具栏插进去，每页自动重复显示
2列布局：一键插入，排版灵活
分页符：手动控制分页
模板管理：支持多个模板，按实体类型自动匹配
独立打印服务：PrintService 随处可用

访问路径

模板列表：在任意 AdminTable 的工具栏中点击打印按钮进入（需先配置打印模板）
模板管理：在系统菜单中找到 "打印模板" 菜单项

快速开始

1. 创建打印模板

进入系统菜单 → 找到 "打印模板"（/Admin/PrintTemplate）
点击新增，填写模板名称（仅允许英文字母）和关联实体类型
拖拽字段、编辑样式后保存即可

2. 设计模板

设计器由三部分组成：

区域	说明
左侧字段树	显示当前实体的所有可用字段，按类型分组（普通字段 / 系统变量 / 多对一关联 / 一对多集合）
中间编辑器	TinyMCE 富文本编辑器，可自由编辑样式、表格、图文
工具栏	页眉、页脚、2列布局、分页符等打印专用按钮

使用步骤：

从左侧字段树中拖拽字段到编辑器中，释放后自动插入 {{字段名}} 占位符
使用工具栏按钮插入页眉/页脚、2列布局、分页符
直接在编辑器中编辑文本、调整样式、插入图片和表格
保存模板

3. 使用打印

在列表页打印

勾选要打印的记录（支持多选）
点击工具栏的 打印 按钮
如果该实体有多个模板，会弹出下拉菜单选择
浏览器自动弹出打印预览对话框

在任意页面打印（通过 PrintService）

@inject EasyAdminBlazor.PrintService PrintService

@code {
    async Task PrintRecords()
    {
        // 按实体类型自动查找模板打印
        await PrintService.PrintAsync("EasyAdminBlazor.SysUser", new long[] { 1, 2, 3 });

        // 按模板ID打印
        await PrintService.PrintAsync(templateId, new long[] { 1, 2, 3 });

        // 指定模板名称打印
        await PrintService.PrintAsync("EasyAdminBlazor.SysUser", ids, "用户信息模板");

        // 仅获取渲染后的HTML，自行处理
        var html = await PrintService.RenderPrintHtmlAsync(templateId, ids);
    }
}

模板语法

占位符

模板中使用 {{属性名}} 作为数据占位符：

语法	说明	示例
`{{属性名}}`	普通字段	`{{Name}}` → "张三"
`{{RowNumber}}`	行号（从1开始）	`{{RowNumber}}` → "1"
`{{CurrentDate}}`	当前日期	`{{CurrentDate}}` → "2026-06-17"
`{{导航属性.子属性}}`	ManyToOne 关联字段	`{{User.NickName}}` → "管理员"

子表格

对于 OneToMany / ManyToMany 集合导航属性，使用 <table data-nav-name="属性名"> 标记：

<table data-nav-name="OrderItems" border="1" style="width: 100%;">
    <thead>
        <tr>
            <th>商品名称</th>
            <th>单价</th>
            <th>数量</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>{{OrderItems.ProductName}}</td>
            <td>{{OrderItems.Price}}</td>
            <td>{{OrderItems.Quantity}}</td>
        </tr>
    </tbody>
</table>

data-nav-name 必须与导航属性名一致
<tbody> 内的行是模板行，每条子记录会重复渲染
子表格中也可以使用 {{RowNumber}}，表示子记录的行号

页眉/页脚

<div class="print-header">
    <h3>公司报表</h3>
    <small>打印日期：{{CurrentDate}}</small>
</div>

<div class="print-footer">
    <p>第 {{RowNumber}} 页</p>
</div>

页眉在每页顶部重复
页脚在每页底部（粘性定位）
每页自动分页（page-break-after: always）

2列布局

使用工具栏的 "2列布局" 按钮插入，生成的 HTML 结构：

<div style="display: flex; gap: 20px;">
    <div style="flex: 1;">左侧内容</div>
    <div style="flex: 1;">右侧内容</div>
</div>

PrintService API

PrintService 注册为 Scoped 服务，可在任意 Razor 组件中注入使用。

方法	参数	说明
`LoadPrintTemplatesAsync`	`entityTypeName`	加载指定实体的所有模板
`RenderPrintHtmlAsync`	`(templateId, ids)`	按模板ID渲染HTML
`RenderPrintHtmlAsync`	`(entityTypeName, ids, templateName?)`	按实体类型渲染HTML
`PrintAsync`	`(templateId, ids)`	按模板ID直接打印
`PrintAsync`	`(entityTypeName, ids, templateName?)`	按实体类型直接打印

参数说明：

entityTypeName：实体类的完整类型名称，如 EasyAdminBlazor.SysUser
ids：要打印的记录 ID 列表
templateId：打印模板的 ID
templateName：可选，模板名称，精确匹配 Name 或 Description

配置项

模板字段：

字段	类型	说明
`Name`	string	模板名称，仅允许英文字母（正则：`^[A-Za-z]+$`）
`TargetEntity`	string	目标实体完整类型名
`HtmlContent`	string	模板 HTML 内容（由设计器自动生成）
`Description`	string	模板描述/备注

注意事项

模板名称仅支持英文字母，不可包含中文或特殊字符
设计器使用 TinyMCE 8.3.2（从 CDN 加载）
拖拽字段需先点击编辑器区域激活 TinyMCE
一对多子表格需要手动在编辑器中插入 <table data-nav-name="属性名"> 结构
打印前会自动加载 report-designer.js（同步 XHR），无需手动引用