我来帮你分析并解决这个问题，从你的代码和错误信息来看，主要有几个关键点需要调整：

1. 修复JavaScript选择器错误 #

你的Print()函数里的类选择器漏了点号（.），导致无法正确识别目标元素，这会直接影响打印内容的展示：

function Print() {
  // 原代码缺少类选择器的.，修正后：
  $(".hideWhenPrint").hide();
  window.print();
  $(".hideWhenPrint").show();
}

2. 确保Radzen模态框内容被打印引擎捕获 #

Radzen模态框是动态插入DOM的，Blazor Server的渲染机制可能导致打印时内容未完全就绪，或者打印引擎无法识别模态框容器。你可以修改打印函数，专门针对模态框内容处理：

更新myjs.js中的打印函数：

function PrintModal() {
  // 隐藏不需要打印的元素
  $(".hideWhenPrint").hide();
  
  // 获取Radzen模态框的核心内容容器
  const modalContent = document.querySelector(".rz-dialog-content");
  if (!modalContent) {
    console.error("无法找到Radzen模态框内容容器");
    $(".hideWhenPrint").show();
    return;
  }

  // 创建临时打印容器，避免影响原页面布局
  const printContainer = document.createElement("div");
  printContainer.style.width = "100%";
  printContainer.style.padding = "20px";
  printContainer.innerHTML = modalContent.innerHTML;
  
  // 将临时容器添加到页面
  document.body.appendChild(printContainer);
  
  // 触发打印
  window.print();
  
  // 清理临时元素，恢复原页面状态
  document.body.removeChild(printContainer);
  $(".hideWhenPrint").show();
}

然后修改Blazor中的调用代码：

private async Task PrintDocument(){
  await JsRuntime.InvokeVoidAsync("PrintModal");
}

3. 添加打印专用CSS样式 #

打印引擎经常会忽略部分页面样式，你可以在site.css中添加打印媒体查询，确保模态框内容在打印时正确渲染：

@media print {
  /* 隐藏页面非模态框内容 */
  body > :not(.rz-dialog-wrapper) {
    display: none !important;
  }
  
  /* 重置模态框的定位样式，适配打印页面 */
  .rz-dialog-wrapper {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    z-index: auto !important;
    width: 100% !important;
    height: auto !important;
  }
  
  .rz-dialog {
    box-shadow: none !important;
    margin: 0 !important;
    width: 100% !important;
  }
  
  /* 确保表格在打印时换行正常 */
  .rz-data-grid {
    width: 100% !important;
    overflow-x: auto !important;
  }
}

4. 处理控制台错误The message port closed before a response was received #

这个错误通常是Blazor JS互操作的调用时机问题，比如模态框还未完全渲染就触发打印。你可以确保组件渲染完成后再允许打印：

private bool isReadyToPrint = false;

protected override async Task OnAfterRenderAsync(bool firstRender)
{
  if (firstRender)
  {
    // 短延迟确保数据和DOM完全加载
    await Task.Delay(100);
    isReadyToPrint = true;
    StateHasChanged();
  }
}

private async Task PrintDocument(){
  if (!isReadyToPrint) return;
  await JsRuntime.InvokeVoidAsync("PrintModal");
}

额外检查点 #

• 确认jQuery在myjs.js之前加载（你的_Layout.cshtml中已经配置正确）；
• 检查Radzen模态框的打开配置，确保内容在打印前已经完全加载。

按照这些步骤调整后，应该就能正常打印模态框的内容了。

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