ASP.NET Core Razor Pages 后台code-behind如何获取指定div的HTML内容

核心逻辑说明 #

服务端的code-behind仅在页面初始渲染阶段持有服务端生成的DOM结构，用户在浏览器端操作（填充控件、更新div内容）产生的DOM变化不会自动同步到服务端，因此无法直接在code-behind中读取前端更新后的div内容。你原本的前端传值思路是可行的，只需要优化传值和预处理逻辑即可解决空白字符、表单控件转文本的问题。

第一步：前端优化传值逻辑 #

在触发下载请求前，先对目标div的内容做预处理，将表单控件转为纯文本、清理多余空白后再赋值给隐藏字段：

// 点击下载按钮时触发该方法
function getProcessedDivContent() {
  // 克隆目标div避免修改页面原有展示内容
  const targetDiv = document.querySelector('#你的目标div的ID').cloneNode(true);

  // 1. 把所有表单控件替换为对应纯文本值
  // 处理输入框
  targetDiv.querySelectorAll('input').forEach(input => {
    const textNode = document.createTextNode(input.value);
    input.parentNode.replaceChild(textNode, input);
  });
  // 处理下拉选择框
  targetDiv.querySelectorAll('select').forEach(select => {
    const selectedText = select.options[select.selectedIndex].text;
    const textNode = document.createTextNode(selectedText);
    select.parentNode.replaceChild(textNode, select);
  });

  // 2. 清理冗余空白字符
  let cleanHtml = targetDiv.innerHTML
    .replace(/\s+/g, ' ') // 合并连续空白为单个空格
    .replace(/>\s+</g, '><') // 去除标签之间的空白
    .trim();

  // 3. 编码后赋值给隐藏字段
  document.querySelector('#HiddenDivContent').value = encodeURIComponent(cleanHtml);
}

第二步：Razor Pages添加绑定字段 #

在cshtml页面添加隐藏的绑定控件：

<input type="hidden" asp-for="HiddenDivContent" id="HiddenDivContent" />
<button type="submit" onclick="getProcessedDivContent()" asp-page-handler="ExportRtf">下载RTF</button>

在code-behind中声明对应的绑定属性：

[BindProperty]
public string HiddenDivContent { get; set; }

第三步：服务端二次清洗后转换 #

在后台处理方法中对内容做二次清洗后传给转换器即可：

public IActionResult OnPostExportRtf()
{
    // 解码并清理残留特殊空白
    string finalHtml = Uri.UnescapeDataString(HiddenDivContent)
        .Trim()
        .Replace("\u00A0", " "); // 替换非断空格为普通空格

    // 此处传入finalHtml调用HtmlToOpenXml的转换逻辑
    // 你的转换代码...

    return File(rtfFileBytes, "application/rtf", "导出文档.rtf");
}

注意事项 #

• 不要直接读取div的innerText，会丢失TinyMCE生成的排版格式，经过预处理的innerHTML可以保留原有基础版式
• 前端编码后再传值可以避免特殊字符被自动编码导致的乱码问题

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