Blazor Server应用如何在Razor页面用iframe直接显示服务器端文本文件？

方案1：使用iframe直接加载（需配置静态文件访问） #

如果想用iframe直接展示文本文件，需先将文件所在目录配置为可被浏览器访问的静态资源目录，同时处理编码避免乱码。

步骤1：配置静态文件中间件 #

在Program.cs中添加自定义静态文件映射，指定文件路径、访问路由及编码：

app.UseStaticFiles(); // 保留默认wwwroot静态文件支持

// 映射PLC告警文本文件所在目录
app.UseStaticFiles(new StaticFileOptions
{
    FileProvider = new PhysicalFileProvider(TagService.PLC_alarm_text_path),
    RequestPath = "/plc-alarm-files",
    OnPrepareResponse = ctx =>
    {
        // 针对txt文件设置Windows-1254编码
        if (ctx.File.Name.EndsWith(".txt", StringComparison.OrdinalIgnoreCase))
        {
            ctx.Context.Response.Headers.ContentType = "text/plain; charset=Windows-1254";
        }
    }
});

步骤2：在Razor页面嵌入iframe #

假设目标文本文件名为alarm.txt，直接通过路由访问：

<iframe src="/plc-alarm-files/alarm.txt" width="100%" height="500px" style="border:1px solid #ddd;"></iframe>

注意：若文件包含敏感内容，请勿直接通过静态文件暴露，需配合权限控制。

方案2：直接在Razor页面渲染文本内容（无需iframe） #

如果不需要iframe的独立上下文，可直接读取文件内容并保留格式渲染，比表格更简洁高效。

优化C#读取逻辑 #

替换逐行添加列表的方式，直接读取完整内容：

public string GetPlcAlarmContent()
{
    return File.ReadAllText(TagService.PLC_alarm_text_path, Encoding.GetEncoding("Windows-1254"));
}

在Razor页面渲染 #

用<pre>标签保留文本换行格式：

<pre style="white-space: pre-wrap; padding:10px; border:1px solid #ddd; height:500px; overflow:auto;">
    @TagService.GetPlcAlarmContent()
</pre>

方案3：通过API端点返回内容（适合权限控制） #

若需对文件访问做权限验证，可创建API端点返回文件内容，再通过iframe或Blazor组件加载。

创建API控制器 #

[ApiController]
[Route("api/plc-alarms")]
public class PlcAlarmsController : ControllerBase
{
    [HttpGet("content")]
    public IActionResult GetContent()
    {
        // 此处可添加权限验证逻辑，比如检查用户角色
        var content = File.ReadAllText(TagService.PLC_alarm_text_path, Encoding.GetEncoding("Windows-1254"));
        return Content(content, "text/plain; charset=Windows-1254");
    }
}

在Razor页面使用 #

• 用iframe加载API：

<iframe src="/api/plc-alarms/content" width="100%" height="500px" style="border:1px solid #ddd;"></iframe>

• 或通过HttpClient异步加载：

@inject HttpClient Http
<pre style="white-space: pre-wrap; padding:10px; border:1px solid #ddd; height:500px; overflow:auto;">
    @fileContent
</pre>

@code {
    private string fileContent;

    protected override async Task OnInitializedAsync()
    {
        fileContent = await Http.GetStringAsync("/api/plc-alarms/content");
    }
}

关键注意事项 #

• 编码一致性：全程保持Windows-1254编码设置，避免中文/特殊字符乱码。
• 大文件处理：若文件体积较大，建议用流式返回（API方案中使用FileStreamResult），避免内存占用过高。
• 路径安全：禁止将包含敏感信息的文件目录直接映射为静态资源，必须通过权限校验控制访问。

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