Blazor Server如何为指定页面禁用或替换_Host文件？

针对你遇到的打印发票/报表时_Host文件主题布局干扰的问题，这里提供几个实用的解决方法：

方法一：创建独立的打印专用_Host文件 #

这是最彻底的方案，完全隔离打印页面与主站布局：

1. 在项目根目录创建Print_Host.cshtml，只保留Blazor启动的核心代码，去掉所有多余的主题、导航栏等元素：

@page "/print/{*pageRoute}"
@{
    Layout = null;
}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>打印页面</title>
    <!-- 仅引入打印必需的样式文件 -->
    <link href="css/print-specific.css" rel="stylesheet" />
</head>
<body>
    <component type="typeof(App)" render-mode="ServerPrerendered" />
    <script src="_framework/blazor.server.js"></script>
</body>
</html>

2. 配置路由规则，让打印页面指向这个新Host：
   在Program.cs中添加打印专用的回退路由：

app.MapBlazorHub();
// 让所有/print开头的路径使用Print_Host
app.MapFallbackToPage("/print/{*pageRoute}", "/Print_Host");

3. 将你的打印页面路由设置为/print/invoice、/print/report这类格式，访问时就会加载干净的打印Host，没有多余布局。

方法二：在现有_Host中动态隐藏全局元素 #

如果不想新增Host文件，可以通过路由判断来控制元素显示：
在_Host.cshtml中用Razor语法判断当前路径是否为打印页面，针对性隐藏不需要的内容：

@{
    var isPrintRoute = Request.Path.StartsWithSegments("/print");
}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"]</title>
    <!-- 非打印页面才加载主题样式 -->
    @if (!isPrintRoute)
    {
        <link href="css/bootstrap.min.css" rel="stylesheet" />
        <link href="css/site.css" rel="stylesheet" />
    }
    <!-- 始终加载打印专用样式 -->
    <link href="css/print-styles.css" rel="stylesheet" media="print" />
</head>
<body>
    <!-- 非打印页面才显示导航栏等布局 -->
    @if (!isPrintRoute)
    {
        <header class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <!-- 你的导航栏代码 -->
        </header>
    }
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>

    <script src="_framework/blazor.server.js"></script>
    <!-- 非打印页面才加载额外脚本 -->
    @if (!isPrintRoute)
    {
        <script src="js/site.js"></script>
    }
</body>
</html>

然后给打印页面设置@layout null，配合Host的动态隐藏，就能得到干净的打印效果。

方法三：用CSS媒体查询直接隐藏打印时的多余元素 #

这是最快捷的方案，不需要修改路由或Host结构，仅通过样式控制：
在你的全局样式文件（如site.css）中添加打印媒体查询，隐藏不需要的元素：

@media print {
    /* 隐藏导航栏、页脚、侧边栏等全局元素 */
    header, footer, .navbar, .sidebar {
        display: none !important;
    }
    /* 调整打印页面的边距、宽度等样式 */
    body {
        margin: 0;
        padding: 1cm;
        width: 100%;
    }
    /* 确保打印内容铺满纸张 */
    .print-container {
        width: 100%;
        max-width: none;
    }
}

这种方法适合快速解决问题，但如果_Host中的元素结构复杂，可能需要写较多的隐藏规则。

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