如何在服务器端渲染Blazor组件并获取其生成的HTML？

• 第一步：将SVG图表组件迁移到Razor类库（RCL）
  把你的图表组件和它依赖的所有公共逻辑、样式都移到独立的Razor类库项目中，同时让Blazor WASM项目和服务端项目都引用这个RCL，保证两边组件逻辑完全一致。
  *注意：如果组件用到了WASM专属API（如IJSRuntime、浏览器DOM API），需要加环境判断做兼容：服务端渲染时跳过浏览器专属逻辑，把JS侧的计算逻辑迁移到C#中实现，确保服务端静态渲染就能生成完整的SVG结构。
• 第二步：服务端注册组件渲染服务
  .NET 6及以上版本自带组件渲染能力，直接在服务端项目的Program.cs中添加注册逻辑即可：

// 注册Blazor组件渲染服务
builder.Services.AddRazorComponents();

如果是.NET 5及更早版本，可以使用第三方组件渲染库完成相同的注册逻辑。

• 第三步：注入服务渲染组件得到HTML
  在你生成PDF的业务类中注入IComponentRenderer，调用渲染方法传入组件参数，得到渲染后的HTML字符串：

public class PdfGeneratorService
{
    private readonly IComponentRenderer _componentRenderer;

    // 注入渲染服务
    public PdfGeneratorService(IComponentRenderer componentRenderer)
    {
        _componentRenderer = componentRenderer;
    }

    public async Task<string> GetChartHtmlAsync(ChartData chartData, int width = 800, int height = 600)
    {
        // 渲染指定组件，传入所需参数
        var renderResult = await _componentRenderer.RenderComponentAsync<SvgChartComponent>(
            ParameterView.FromDictionary(new Dictionary<string, object?>
            {
                { nameof(SvgChartComponent.Data), chartData },
                { nameof(SvgChartComponent.Width), width },
                { nameof(SvgChartComponent.Height), height }
            }));
        
        // 转换为纯HTML字符串返回
        return renderResult.ToHtmlString();
    }
}

• 第四步：插入HTML到Razor视图生成PDF
  将上一步得到的组件HTML作为参数传入用于生成PDF的Razor视图，在视图中用@Html.Raw(ChartHtml)输出内容，避免HTML被自动转义导致SVG失效。
  生成PDF前额外检查：所有SVG相关的样式要写成内联样式，不要用外联CSS，防止转PDF时样式丢失。

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