控制器方法中用<pre>包裹CSV内容遇解码错误的解决及替代方案

先修复HTML包裹方式的解码错误 #

• 转义HTML特殊字符：CSV内容里如果包含&、<、>、"这些字符，直接放到HTML里会被浏览器解析成HTML元素，导致内容错乱或解码错误。服务器端返回前必须把这些字符转义成对应的HTML实体：&→&，<→<，>→>，"→"。用你所用语言的内置工具就能搞定，比如C#用HttpUtility.HtmlEncode，Java用StringEscapeUtils.escapeHtml4，Python用html.escape。
• 明确指定字符编码：返回响应时，Content-Type要带上编码，比如设置为text/html; charset=utf-8，确保服务器和客户端用统一的编码解析内容，避免乱码。
• 正确设置

  样式：给
  标签加上style="white-space: pre; overflow-x: auto; font-family: monospace;"，这样能强制保留CSV的原始换行和空格，内容过长时还能横向滚动，满足显示需求。

其他替代解决方案 #

• 直接用text/plain+iframe样式控制：不用转成HTML，保持返回text/plain，但给承载的iframe添加CSS样式：

  .csv-display-iframe {
    font-family: monospace;
    white-space: pre;
    overflow-x: auto;
  }
  

  现代浏览器大多支持对text/plain内容应用这类样式，能直接控制不自动换行，还能保持CSV的原始格式。
• 前端解析渲染成表格：服务器返回JSON格式的CSV数据（或直接返回原始CSV文本），前端用轻量解析库（比如Papa Parse）把CSV转成数组，再动态生成HTML表格。这种方式完全可控样式，还能添加排序、高亮等交互功能，适合需要优化显示效果的场景。
• 使用Data URI嵌入：把CSV内容编码成Data URI，直接作为iframe的src，比如：

  const csvContent = "你的CSV内容";
  const dataUri = `data:text/plain;charset=utf-8,${encodeURIComponent(csvContent)}`;
  document.getElementById('csv-iframe').src = dataUri;
  

  同时给iframe加上之前提到的样式，这种方式不用走服务器接口，适合小体积的CSV内容。

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