Swagger UI中点击Execute按钮后如何在新窗口打开响应？

嘿，你留意到的newWindow变量确实就是实现这个功能的关键！虽然官方文档没把这个参数的说明写得很显眼，但实际用下来完全能满足你的需求，我给你两种解决方案：

1. 全局开启新窗口打开响应 #

如果你希望所有符合条件的响应（比如HTML、二进制文件等）都在新窗口打开，直接在初始化Swagger UI的时候加上newWindow: true配置就行：

const ui = SwaggerUIBundle({
  url: "你的API文档地址.yaml",
  dom_id: '#swagger-ui',
  deepLinking: true,
  newWindow: true, // 开启这个参数就搞定了
  // 其他你需要的配置项...
});

设置之后，当你点击Execute按钮，返回的HTML响应会自动在新标签页打开，直接就能以网页形式查看内容了。

2. 针对特定接口自定义处理 #

要是你只想让返回HTML的接口生效，不想全局改变所有响应的展示方式，可以用responseInterceptor来做针对性处理：

const ui = SwaggerUIBundle({
  // 基础配置...
  responseInterceptor: (response) => {
    // 判断响应是否为HTML类型
    if (response.headers['content-type']?.includes('text/html')) {
      // 将响应内容转为Blob，创建临时URL后在新窗口打开
      const htmlBlob = new Blob([response.data], { type: 'text/html' });
      const tempUrl = URL.createObjectURL(htmlBlob);
      window.open(tempUrl, '_blank');
      // 可以给原Swagger UI的响应区域加个提示
      response.data = '<div style="padding:1rem;">HTML响应已在新窗口打开 ✅</div>';
    }
    return response;
  }
});

这种方式更灵活，只会对返回HTML的接口触发新窗口打开逻辑，其他接口还是正常在Swagger UI内展示响应内容。

简单说，newWindow是Swagger UI内部用来控制非结构化响应展示方式的参数，设为true后就会自动把这类响应转到新窗口，刚好匹配你的场景。

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