Azure部署的Microsoft Teams Web App Bot HTML标签无法渲染求解

我来帮你搞定这个Teams Bot的渲染问题——Teams对Bot消息的格式支持有严格限制，不是所有HTML都能正常解析，咱们一步步拆解解决方案：

1. 先明确Teams支持的HTML范围 #

Teams只支持非常有限的HTML子集，常见能正常渲染的包括：

• 格式化标签：<b>, <i>, <u>, <s>
• 换行：<br>
• 链接：<a href="url">文本</a>（注意必须是完整HTTPS URL）
• 空格实体： （但要避免双重转义成 ，这是很多人踩的坑）

像<button>、<iframe>这类标签，Teams完全不支持直接渲染，必须用Teams原生组件替代。

2. 修复 等转义字符的问题 #

如果你的Bot返回的是 而非 ，这属于双重转义，Teams会把它当成普通文本显示。解决方法：

• 检查Bot代码，确保输出的HTML实体没有被二次转义。比如C#中避免用HttpUtility.HtmlEncode处理已包含 的字符串；Node.js中直接输出 而非转义后的字符。
• 用Bot Framework Emulator测试消息，查看原始JSON结构，确认text字段里的实体是否正确。

3. 替代不支持的HTML标签 #

对于<button>：用自适应卡片（Adaptive Cards）的Action按钮 #

Teams推荐用自适应卡片实现交互元素，比如按钮。示例自适应卡片JSON：

{
  "type": "AdaptiveCard",
  "version": "1.0",
  "body": [
    {
      "type": "TextBlock",
      "text": "需要用户交互的内容"
    }
  ],
  "actions": [
    {
      "type": "Action.OpenUrl",
      "title": "打开链接",
      "url": "https://your-target-url.com"
    },
    {
      "type": "Action.Submit",
      "title": "提交数据",
      "data": { "action": "submit-form" }
    }
  ]
}

在Bot代码中，将这个卡片作为Attachment发送，设置ContentType为application/vnd.microsoft.card.adaptive，Teams就能正确渲染出交互按钮。

对于<iframe>：用跳转链接或Teams Tab替代 #

Teams不允许在Bot消息中嵌入iframe，你有两个替代方案：

• 用自适应卡片的Action.OpenUrl按钮，引导用户点击跳转至目标网页。
• 如果需要在Teams内部展示网页内容，可以开发Teams Tab应用，嵌入网页后通过Bot引导用户打开该Tab。

4. 优先使用Teams支持的Markdown格式 #

比起HTML，Markdown在Teams中的渲染更稳定可靠，建议优先使用：

• 加粗：**文本**（替代<b>）
• 斜体：*文本*（替代<i>）
• 换行：\n（或<br>）
• 链接：[显示文本](url)（替代<a>标签）

同时，确保Bot发送消息时正确设置textFormat属性：

• 用HTML时设置为TextFormat.Html
• 用Markdown时设置为TextFormat.Markdown

比如C#中的示例代码：

var message = MessageFactory.Text("**加粗文本**\n*斜体文本*", null, TextFormat.Markdown);
await turnContext.SendActivityAsync(message, cancellationToken);

5. 测试验证 #

先用Bot Framework Emulator测试消息渲染效果，它能模拟Teams的渲染逻辑，帮你提前发现格式问题，确认无误后再部署到Teams环境。

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