在JSP中使用GSON后，如何将JSON显示为树形视图

你遇到的核心问题是：浏览器渲染HTML时会自动忽略文本中的换行和缩进，导致Gson生成的格式化JSON字符串在页面上显示为无格式的普通文本，而控制台能正常显示格式。以下是几种可行的解决方案：

方法一：使用<pre>标签保留格式 #

<pre>标签会完全保留文本的原始格式（包括换行、缩进），是最简单的解决方式。修改你的JSP代码中JSON输出部分：

<td align="center"><div contenteditable="true"><pre><%=prettyJson%></pre></div></td>

如果需要调整显示样式（比如背景、滚动），可以给<pre>添加CSS样式：

pre {
    background-color: #f5f5f5;
    padding: 10px;
    border-radius: 4px;
    overflow-x: auto;
    max-height: 300px;
}

方法二：转义换行和空格为HTML元素 #

将JSON字符串中的换行符\n替换为<br>，缩进空格替换为 ，让浏览器识别格式：

<%
// 在生成prettyJson后添加转义逻辑
String prettyJsonHtml = prettyJson.replace("\n", "<br>").replace("    ", "&nbsp;&nbsp;&nbsp;&nbsp;");
%>
<td align="center"><div contenteditable="true"><%=prettyJsonHtml%></div></td>

这种方式适合需要自定义格式细节的场景，但相比<pre>标签更繁琐。

方法三：使用前端库实现语法高亮+可折叠树形视图 #

如果需要更专业的展示效果（比如语法高亮、节点折叠），可以使用前端JSON格式化库（如highlight.js、json-viewer），步骤如下：

1. 下载库文件：将库的CSS和JS文件下载到项目静态资源目录（如webapp/css、webapp/js）
2. 在JSP头部引入资源：

<link rel="stylesheet" href="${pageContext.request.contextPath}/css/github.min.css">
<script src="${pageContext.request.contextPath}/js/highlight.min.js"></script>
<script>hljs.highlightAll();</script>

3. 修改JSON输出代码：

<td align="center"><div contenteditable="true"><code class="json"><%=prettyJson%></code></div></td>

额外优化建议 #

• 避免在循环内重复创建Gson实例，将Gson gson = new GsonBuilder().setPrettyPrinting().create();移到循环外部，提升性能：

<%
Gson gson = new GsonBuilder().setPrettyPrinting().create();
for(String strCol : ResultSetColumnNames) {
    // ... 原有循环逻辑
}
%>

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