Blazor .NET 9：OnInitializedAsync执行后如何获取渲染HTML并保存为字符串？

DevOps 小满

2026-6-14

在Blazor .NET 9中捕获渲染后的HTML字符串

方法1：客户端通过IJSRuntime读取DOM元素内容

OnInitializedAsync执行完成后，组件仅完成逻辑初始化，还未渲染到客户端DOM，需等到OnAfterRenderAsync阶段才能获取已渲染的HTML。具体步骤如下：

给目标组件或元素添加@ref引用：

<div @ref="_targetElement">
    <!-- 你的组件内容 -->
</div>

注入IJSRuntime并编写捕获逻辑：

private ElementReference _targetElement;
[Inject] private IJSRuntime JSRuntime { get; set; }

protected override async Task OnInitializedAsync()
{
    await base.OnInitializedAsync();
    // 执行你的初始化业务逻辑
}

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        // 首次渲染完成（即OnInitializedAsync执行后），获取目标元素的HTML
        string htmlContent = await JSRuntime.InvokeAsync<string>("getElementHtml", _targetElement);
        // 此处可将htmlContent保存到变量或持久化存储
    }
    await base.OnAfterRenderAsync(firstRender);
}

在wwwroot/index.html中添加对应JS函数：

window.getElementHtml = (element) => {
    return element.outerHTML;
};

方法2：服务器端预渲染捕获（适用于Blazor Server/静态Web应用）

如果是Blazor Server或使用静态预渲染的场景，可直接在服务器端渲染组件并获取HTML字符串，无需依赖客户端DOM：

private async Task CaptureComponentHtml()
{
    var htmlRenderer = new HtmlRenderer(serviceProvider);
    var componentFragment = new RenderFragment(builder =>
    {
        builder.OpenComponent<YourTargetComponent>(0);
        builder.CloseComponent();
    });

    string htmlContent = await htmlRenderer.RenderToStringAsync(componentFragment);
    // 保存htmlContent字符串
}

你可以在OnInitializedAsync执行完成后调用此方法，生成的HTML与发送到客户端的内容完全一致。