如何在Outlook邮件中插入带HTML内容的按钮实现邮件流转跟踪

你之前嵌入失败的核心原因是mailto协议的body参数不支持直接传入未处理的原生HTML代码，所有特殊字符（包括标签里的<>、空格、&、换行等）都需要先做URL编码，你当前的正文内容长度符合Outlook对mailto链接的长度限制，按以下步骤操作即可：

步骤1：预处理你的标准邮件正文代码 #

先对你手里的原始HTML正文做两处修改，避免后续样式失效或代码报错：

• 删掉代码末尾多余的一个</p>闭合标签，仅保留一个即可
• 把<style>标签挪到<p>标签外面

处理后的标准正文代码如下：

<style> table, th, td {border: 1px solid black; border-collapse: collapse;}
</style>
<p style="color:black;font-size:17px;font-family:calibri;">
  Hi <b>John,</b> <br /> <br /> Please review price for:<br /><br/> 
  <table style="width:100%">
    <tr>
      <th>Country</th>
      <th>XXCode</th>
      <th>XXLevel</th>
      <th>XXTitle</th>
      <th>XXFamily</th>
      <th>XXCut</th>
      <th>XXMatch</th>
      <th>XXGrade</th>
      <th>XXXMatch</th>
      <th>XXXGrade</th>
     </tr>
     <tr>
       <td rowspan ="16">BRAZIL</td>
     </tr>
     <tr> 
      <td>10000XXX</td>
      <td>B</td>
      <td>Logistics</td>
      <td>Supply</td>
      <td>General</td>
      <td>ASCXXX</td>
      <td>7 | 8</td>
      <td>SCNXXXXX</td>
      <td>43 | 44 | 45 | 46</td>
     </tr>
   </table><br /><br /> The deadline for this task is: 
   <span style="background-color:yellow">26-8-2021, 10:16</span> <br /><br />
    After the task is done- please send a message to @Anna, Jolen for review.<br /><br />Thank you,<br />
</p>

步骤2：对HTML正文做URL编码 #

你不需要懂编码规则，按以下操作即可：

1. 把上面处理好的HTML代码完整复制
2. 搜索「HTML URL编码」，任意选一个在线工具，把代码粘贴进去，选择编码选项，得到一串没有特殊符号的编码后文本
3. 编码时确保勾选「编码所有特殊字符」选项，避免空格、&等符号导致链接断裂

步骤3：替换按钮代码中的body内容 #

把你原有按钮代码里mailto链接的body=后面的<html><body><b>blablabla</b></body></html>，替换成上一步得到的编码后文本即可。
修改后的按钮代码结构示例：

<table border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td align="center" style="border-radius: 5px; background-color: #733658;">
            <a href="mailto:anna.jolen@company.com?CC=jola.zilen@company.com&subject=FW (&cell A520&) DOER&body=【这里替换成你编码后的HTML代码】" target="_blank" style="font-size: 18px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; font-weight: bold; text-decoration: none;border-radius: 5px; padding: 12px 18px; border: 1px solid #733658; display: inline-block;">DOER'S RESPONSE &rarrhk;</a>
        </td>
    </tr>
</table>

步骤4：制作审核方回传按钮 #

按照同样逻辑制作第二个按钮，修改mailto的收件人为请求方邮箱，subject里的跟踪标识改成REVIEWER，对应调整body内容即可。

注意事项 #

• 后续如果需要修改正文内容，每次修改后都要重新做一次URL编码再替换到按钮里
• 测试时先给自己发一封测试邮件，点击按钮检查弹出的新邮件里收件人、主题、正文是否符合预期

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