ASP.NET(VB.NET)实现打印每页重复模板/页眉的技术问询

问题说明 #

作为ASP.NET(VB.NET)初学者，需要实现文档打印时每页显示相同的自定义模板（页眉，即截图中黑色区域）：当GridView记录超过10条时自动分页，第二页及后续页面需保留与第一页一致的模板/页眉。

现有代码问题分析 #

当前代码尝试通过设置GridView.HeaderRow.TableSection和page-break-after样式实现分页，但存在以下不足：

• 未将自定义模板（黑色区域页眉）纳入每页打印内容
• 仅依赖GridView自身表头，未处理自定义模板的重复渲染
• CSS打印规则未配置，无法确保页眉在每页固定显示

解决方案步骤 #

1. 添加自定义打印模板HTML：在页面中定义需要重复的页眉模板（黑色区域）
2. 配置打印专用CSS：使用@page和媒体查询@media print设置页眉固定显示，同时控制分页符
3. 调整后台代码：确保GridView每10条记录后添加分页符，并将模板与GridView一同渲染到打印内容中
4. 完善打印JavaScript函数：正确加载模板、GridView和打印样式

完整代码实现 #

前端页面（.aspx） #

<style id="gridStyles" type="text/css">
    /* 普通样式 */
    .print-header {
        background-color: #000;
        color: #fff;
        padding: 10px;
        margin-bottom: 15px;
    }
    .grid-view {
        width: 100%;
        border-collapse: collapse;
    }
    .grid-view th, .grid-view td {
        border: 1px solid #ccc;
        padding: 8px;
    }

    /* 打印专用样式 */
    @media print {
        @page {
            margin-top: 80px; /* 预留页眉位置 */
        }
        .print-header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 60px;
            page-break-inside: avoid;
        }
        .grid-row-break {
            page-break-after: always;
        }
        /* 隐藏不必要的页面元素 */
        .non-printable {
            display: none;
        }
    }
</style>

<!-- 自定义打印页眉模板 -->
<div class="print-header non-printable" id="printHeader">
    <!-- 这里放入你的黑色区域模板内容，比如公司logo、标题等 -->
    <h3>自定义打印页眉</h3>
    <p>这是每页都要显示的黑色区域模板</p>
</div>

<!-- 打印按钮 -->
<asp:Button ID="btnPrint" runat="server" Text="打印" OnClick="PrintGridView" CssClass="non-printable" />

<script type="text/javascript">
    function PrintGrid(gridHTML, gridCSS) {
        var printWindow = window.open('', '_blank');
        // 构建打印页面内容，包含页眉模板和GridView
        var printContent = `
            <html>
                <head>
                    <style>${gridCSS}</style>
                </head>
                <body>
                    <div class="print-header">${document.getElementById('printHeader').innerHTML}</div>
                    ${gridHTML}
                </body>
            </html>
        `;
        printWindow.document.write(printContent);
        printWindow.document.close();
        printWindow.print();
        printWindow.close();
    }
</script>

VB.NET后台代码（.aspx.vb） #

Protected Sub PrintGridView(ByVal sender As Object, ByVal e As EventArgs)
    Dim dataGrid As New System.Web.UI.WebControls.GridView()
    ' 设置GridView每页显示10条（对应需求的分页阈值）
    dataGrid.PageSize = 10
    ' 绑定数据源
    dataGrid.DataSource = From lst In _lstPrint 
                          Select New With {
                              .Item = lst.Item,
                              .Descricao = lst.TipoComponente,
                              .Certificado = lst.Certificacao,
                              .Corrida = lst.Corrida,
                              .Qtd = lst.Qtd,
                              .UnidMedida = lst.UnidadeMedida
                          }
    dataGrid.DataBind()

    ' 为每10条记录添加分页符（最后一页不需要）
    For Each row As GridViewRow In dataGrid.Rows
        If (row.RowIndex + 1) Mod dataGrid.PageSize = 0 AndAlso row.RowIndex <> dataGrid.Rows.Count - 1 Then
            row.Attributes.Add("class", "grid-row-break")
        End If
    Next

    ' 渲染GridView为HTML
    Using sw As New StringWriter()
        Dim hw As New HtmlTextWriter(sw)
        dataGrid.RenderControl(hw)
        Dim gridHTML As String = sw.ToString().Replace(Environment.NewLine, "")
        Dim gridCSS As String = gridStyles.InnerText.Replace("""", "'").Replace(Environment.NewLine, "")

        ' 注册打印脚本
        Dim script = "window.onload = function() { PrintGrid('" & gridHTML & "', '" & gridCSS & "'); }"
        ClientScript.RegisterStartupScript([GetType](), "GridPrint", script, True)
    End Using
End Sub

' 必须重写此方法以支持GridView的RenderControl
Public Overrides Sub VerifyRenderingInServerForm(control As Control)
    ' 无需实现内容，允许GridView在服务器表单外渲染
End Sub

关键说明 #

• 自定义页眉重复显示：通过CSS的position: fixed结合@media print，确保页眉在打印时固定在每页顶部
• 分页逻辑：通过为每10条记录的行添加grid-row-break类，触发page-break-after: always实现自动分页
• 渲染完整打印内容：打印时将自定义页眉模板和GridView HTML一同写入新窗口，确保内容完整性

内容的提问来源于stack exchange，提问作者GojoSatoru