如何在ASP.NET GridView中添加Input按钮实现打印功能？

我来帮你搞定在GridView里添加打印按钮的需求，先把你的现有代码补全优化，再给你两种常用的实现思路（后台处理+前端处理），你可以根据自己的需求选择：

一、完善后的GridView前端代码 #

首先把你的GridView代码补全，给打印按钮加上CommandArgument来传递当前行的产品ID，方便后台精准获取数据：

<asp:GridView ID="GridViewProducts" runat="server" AutoGenerateColumns="false" 
    OnSelectedIndexChanged="GridViewProducts_SelectedIndexChanged" 
    OnRowDataBound="GridViewProducts_Bound" 
    CssClass="gridviewproducts" 
    DataKeyNames="ID">
    <Columns>
        <asp:BoundField DataField="ID" HeaderText="产品ID" />
        <asp:BoundField DataField="NAME" HeaderText="产品名称" />
        <asp:TemplateField HeaderText="操作">
            <ItemTemplate>
                <input type="button" id="btnPrint" value="打印" runat="server" 
                    onserverclick="btnPrint_ServerClick" 
                    CommandArgument='<%# Eval("ID") %>' />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

二、后台处理方案（适合需要获取详细数据打印） #

这种方式会先在后台拿到对应产品的完整数据，生成格式化的打印HTML，再弹出新窗口触发打印：

后台C#代码 #

using System.Web;

protected void btnPrint_ServerClick(object sender, EventArgs e)
{
    // 拿到点击按钮对应的产品ID
    Button printBtn = (Button)sender;
    int productId = Convert.ToInt32(printBtn.CommandArgument);

    // 从数据库获取产品详细数据（这里用模拟方法，实际替换成你的数据库查询逻辑）
    var targetProduct = GetProductDetails(productId);

    // 生成带样式的打印HTML内容
    string printHtmlContent = $@"
        <html>
            <head>
                <title>产品详情打印页</title>
                <style>
                    .print-wrapper {{ font-family: 'Microsoft YaHei', Arial; padding: 30px; max-width: 800px; margin: 0 auto; }}
                    .print-title {{ font-size: 20px; font-weight: bold; text-align: center; margin-bottom: 30px; border-bottom: 1px solid #ccc; padding-bottom: 10px; }}
                    .detail-item {{ margin: 15px 0; font-size: 16px; }}
                    .detail-label {{ display: inline-block; width: 120px; color: #666; }}
                </style>
            </head>
            <body>
                <div class='print-wrapper'>
                    <div class='print-title'>产品详细信息</div>
                    <div class='detail-item'><span class='detail-label'>产品ID：</span>{targetProduct.ID}</div>
                    <div class='detail-item'><span class='detail-label'>产品名称：</span>{targetProduct.NAME}</div>
                    <!-- 这里可以添加更多你需要打印的字段，比如价格、库存等 -->
                </div>
                <script>
                    // 页面加载完成后自动触发打印，打印后关闭窗口
                    window.onload = function() {{
                        window.print();
                        setTimeout(() => window.close(), 500);
                    }}
                </script>
            </body>
        </html>";

    // 注册脚本打开新窗口并写入打印内容
    ClientScript.RegisterStartupScript(this.GetType(), "PrintProduct", 
        $"window.open('','_blank').document.write('{HttpUtility.HtmlEncode(printHtmlContent)}');", true);
}

// 模拟获取产品详情的方法，实际项目中替换为EF、ADO.NET等数据库查询逻辑
private Product GetProductDetails(int productId)
{
    return new Product
    {
        ID = productId,
        NAME = "测试产品" + productId,
        // 补充其他需要的属性
    };
}

// 产品实体类，根据你的数据库表结构定义
public class Product
{
    public int ID { get; set; }
    public string NAME { get; set; }
    // 其他属性如Price、Stock等
}

三、前端处理方案（适合直接打印GridView当前行内容） #

如果只需要打印GridView当前行显示的内容，不需要后台额外获取数据，可以用纯前端JavaScript实现，更轻量化：

修改后的GridView模板列代码 #

把按钮改成普通HTML按钮，去掉runat="server"，添加自定义属性传递ID：

<asp:TemplateField HeaderText="操作">
    <ItemTemplate>
        <input type="button" id="btnPrint" value="打印" onclick="printCurrentRow(this)" data-productid='<%# Eval("ID") %>' />
    </ItemTemplate>
</asp:TemplateField>

页面中的JavaScript代码 #

function printCurrentRow(btn) {
    // 获取当前行元素
    var targetRow = btn.closest('tr');
    // 克隆行内容用于打印
    var printContent = targetRow.cloneNode(true).outerHTML;
    
    // 打开新窗口并写入打印内容
    var printWindow = window.open('', '_blank', 'width=800,height=600');
    printWindow.document.write(`
        <html>
            <head>
                <title>打印当前行</title>
                <style>
                    table { border-collapse: collapse; width: 100%; }
                    th, td { border: 1px solid #ccc; padding: 8px; text-align: left; }
                </style>
            </head>
            <body>
                <table>${printContent}</table>
            </body>
        </html>
    `);
    printWindow.document.close();
    // 触发打印
    printWindow.print();
    // 打印后关闭窗口
    printWindow.close();
}

注意事项 #

• 如果用后台方案，记得引用using System.Web;来使用HttpUtility.HtmlEncode，避免HTML特殊字符导致的问题。
• 前端方案要注意浏览器兼容性，closest方法在IE11及以上支持，如果需要兼容更低版本，可以用其他方式获取父行。

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