如何在Blazor Server应用中使用FastReport并解决渲染显示问题

首先纠正一个小误解：Blazor Server并不是用Shadow DOM来管理DOM的，它是通过SignalR维护服务器端虚拟DOM和客户端真实DOM的同步。你遇到的报表短暂显示后消失，大概率是因为Blazor在组件重新渲染时，对比虚拟DOM后把FastReport插入的HTML给重置了——毕竟Blazor默认会管理它渲染出来的所有DOM元素，当组件状态变化触发重新渲染时，它会覆盖掉你手动插入的内容。

下面给你几个可行的解决思路：

方案一：用JavaScript直接插入HTML（最稳定的方案） #

绕开Blazor的虚拟DOM管理，直接通过JS把FastReport生成的HTML插入到DOM里，这样Blazor就不会去修改这部分内容。具体步骤如下：

1. 修改Razor组件，添加一个带唯一ID的容器：

@page "/"
@inherits IndexBase
@inject IJSRuntime JSRuntime

<div class="container">
    <div id="fastreport-container"></div>
</div>

2. 调整后台代码，在组件DOM渲染完成后调用JS插入HTML：

public class IndexBase : ComponentBase
{
    [Inject]
    protected IJSRuntime JSRuntime { get; set; }
    private readonly string _reportPath = @"C:\tmp\Report\report.frx";
    private readonly string _dataSetPath = @"C:\tmp\Report\nwind.xml";

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // 初始化FastReport并渲染
            var report = new WebReport();
            report.Report.Load(_reportPath);
            
            var dataSet = new DataSet();
            dataSet.ReadXml(_dataSetPath);
            report.Report.RegisterData(dataSet, "NorthWind");
            
            var reportHtml = report.RenderSync().Value;
            
            // 调用JS插入HTML到指定容器
            await JSRuntime.InvokeVoidAsync("insertFastReportHtml", "fastreport-container", reportHtml);
        }
    }
}

3. 添加JavaScript函数，在wwwroot/js/site.js里新增：

function insertFastReportHtml(elementId, htmlContent) {
    const container = document.getElementById(elementId);
    if (!container) return;
    
    container.innerHTML = htmlContent;
    
    // 如果FastReport渲染的HTML包含需要初始化的脚本，这里可以补充调用
    // 比如FastReport可能需要执行初始化逻辑，根据官方文档调整
    // 示例：if (window.FastReport) window.FastReport.init();
}

这个方案的核心是让JS直接操作DOM，完全避开Blazor的虚拟DOM同步机制，报表的HTML不会被Blazor覆盖，能稳定显示。

方案二：阻止Blazor重置报表DOM #

如果你不想引入JS，也可以通过控制Blazor的渲染逻辑来避免报表HTML被修改：

子方案1：用@key稳定组件渲染 #

给报表容器添加@key，绑定到你的WebReport对象，只要对象实例不变，Blazor就不会重新渲染这个容器：

<div class="container" @key="report">
    @((MarkupString)report.RenderSync().Value)
</div>

子方案2：控制组件渲染时机 #

重写组件的ShouldRender方法，只在必要时才重新渲染，避免不必要的DOM重置：

private bool _isReportLoaded = false;

protected override bool ShouldRender()
{
    // 只在第一次加载报表时渲染，后续除非主动更新报表，否则不渲染
    if (!_isReportLoaded)
    {
        _isReportLoaded = true;
        return true;
    }
    return false;
}

这个方案适合简单场景，但如果你的组件需要频繁更新其他内容，可能会有冲突，需要仔细控制渲染逻辑。

额外注意点 #

• 如果FastReport生成的HTML包含脚本，Blazor默认会阻止脚本执行，你需要确保这些脚本是通过合法方式加载的（比如提前在_Host.cshtml里引入FastReport的官方JS库）。
• 动态更新报表时，方案一需要重新调用JS方法插入新的HTML；方案二则需要更新@key绑定的对象或者切换_isReportLoaded状态触发重新渲染。

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