如何在Swagger UI中美化响应体JSON？我使用SwaggerUIBundle

当然有办法搞定这个！用SwaggerUIBundle的时候，其实有几种实用的方式让响应体的JSON自动变得整齐美观，我给你分享几个常用方案：

1. 确保后端返回正确的Content-Type #

这是最基础也是最关键的一步：如果你的API返回的响应头里Content-Type不是application/json（比如是text/plain），Swagger UI大概率不会自动解析并美化JSON。

所以先检查后端接口，确保返回的响应头包含：

Content-Type: application/json

只要后端配置正确，Swagger UI默认就会把响应体的JSON格式化成带缩进、换行的美观样式。

2. 调整SwaggerUIBundle的初始化配置 #

如果默认美化没生效，或者你想自定义展示效果，可以在初始化SwaggerUIBundle时添加相关配置项，强制开启美化并调整展示行为：

const ui = SwaggerUIBundle({
  url: "/your-swagger-spec.json", // 你的OpenAPI规范地址
  dom_id: '#swagger-ui',
  deepLinking: true,
  // 控制API文档的展开程度，设为'full'可以默认展开所有响应
  docExpansion: 'full',
  // 设置响应体默认展开的层级，确保JSON结构清晰
  defaultModelExpandDepth: 2,
  defaultModelsExpandDepth: 2,
  // 开启扩展信息展示，不影响美化但能提升体验
  showExtensions: true,
  showCommonExtensions: true
});

这些配置能让Swagger UI默认以美化后的格式展示响应体，同时优化整体的文档展开逻辑。

3. 自定义美化逻辑（应对特殊场景） #

如果后端没法修改Content-Type，或者你需要更个性化的美化规则，可以通过自定义组件来覆盖Swagger UI的默认响应渲染：

// 获取原始的响应渲染组件
const originalResponseRender = ui.getComponent('responseRender');

// 重写渲染逻辑，手动美化JSON
ui.setComponent('responseRender', (props) => {
  const { response } = props;
  // 尝试解析并格式化响应体
  if (response.body && typeof response.body === 'string') {
    try {
      const parsedJson = JSON.parse(response.body);
      // 用2个空格缩进格式化JSON
      response.body = JSON.stringify(parsedJson, null, 2);
    } catch (err) {
      // 如果不是合法JSON，保持原样
      console.warn('Response body is not valid JSON, skipping formatting');
    }
  }
  // 调用原始渲染组件展示处理后的内容
  return originalResponseRender(props);
});

这个方法能强制处理所有响应体，哪怕后端返回的是文本类型的JSON，也能自动美化。

额外小技巧 #

Swagger UI界面上其实自带了「Raw」按钮，点击可以切换美化后的格式和原始文本格式。如果只是偶尔需要查看美化后的内容，也可以直接用这个按钮快速切换～

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