如何将Blazor组件的HTML标记转换为字符串用作邮件正文？

方案1：直接复用现有Blazor组件渲染为HTML字符串 #

.NET 7及以上版本内置了IHtmlRenderer服务，可以直接把任意Blazor组件渲染为纯HTML字符串，不需要修改现有组件逻辑：

// 构造函数注入IHtmlRenderer服务
private readonly IHtmlRenderer _htmlRenderer;
public YourMailService(IHtmlRenderer htmlRenderer)
{
    _htmlRenderer = htmlRenderer;
}

public async Task<string> GetReportHtmlAsync(List<YourDataItem> dataList, string reportTitle)
{
    // 给组件传参，参数和你现有组件的@Parameter一一对应
    var componentParams = ParameterView.FromDictionary(new Dictionary<string, object?>
    {
        { nameof(ReportComponent.DataList), dataList },
        { nameof(ReportComponent.Title), reportTitle }
    });
    // 渲染组件得到结果
    var renderResult = await _htmlRenderer.RenderComponentAsync<ReportComponent>(componentParams);
    // 直接返回已经完成转义的完整HTML字符串，可直接传给SendGrid
    return renderResult.ToHtmlString();
}

该方案的优势：

• 完全复用现有组件的展示逻辑，不需要维护两套渲染规则，不会出现应用内展示和邮件内容不一致的问题
• 自动处理所有HTML转义逻辑，不需要手动处理特殊字符
• 组件内的交互代码（点击事件、绑定逻辑等）不会被包含到输出结果中，刚好符合邮件的静态HTML需求

注意：IHtmlRenderer是.NET 7及以上版本的内置API，低版本可使用第三方开源组件渲染类库实现相同效果

方案2：共用静态渲染方法（你提到的备选方案） #

这个方案非常适合邮件场景，你可以完全控制HTML的每一处细节，避免Blazor生成的多余属性影响邮件客户端兼容性：

public static class ReportGenerator
{
    public static MarkupString BuildReportHtml(List<YourDataItem> dataList, string title)
    {
        var sb = new StringBuilder();
        // 所有动态输出的内容都手动做HTML转义，避免注入问题和展示异常
        sb.Append($"<h1>{WebUtility.HtmlEncode(title)}</h1>");
        sb.Append("<table border=\"1\" cellpadding=\"5\" cellspacing=\"0\">");
        sb.Append("<thead><tr><th>字段1</th><th>字段2</th></tr></thead><tbody>");
        foreach (var item in dataList)
        {
            sb.Append("<tr>");
            sb.Append($"<td>{WebUtility.HtmlEncode(item.Prop1)}</td>");
            sb.Append($"<td>{WebUtility.HtmlEncode(item.Prop2)}</td>");
            sb.Append("</tr>");
        }
        sb.Append("</tbody></table>");
        return new MarkupString(sb.ToString());
    }
}

使用方式：

• 发邮件时：直接取ReportGenerator.BuildReportHtml(data, title).Value就是完整HTML字符串，直接传给SendGrid即可
• 应用内展示时：Blazor组件中直接写@ReportGenerator.BuildReportHtml(DataList, ReportTitle)即可正常渲染

该方案的优势：

• HTML完全可控，可以针对邮件客户端做最简化的兼容优化，不会出现多余的Blazor专属属性
• 不依赖Blazor运行环境，就算在后台任务、控制台程序等非Blazor上下文中也可以调用生成邮件内容

方案选择建议 #

• 现有组件已经完成开发，只需要快速拿到HTML字符串发邮件，选方案1，开发成本最低
• 对邮件兼容性要求极高，或者需要在Blazor上下文外调用生成逻辑，选方案2

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