点击按钮唤起Gmail/Lotus Notes并预填含链接邮件的实现问题

这个问题我之前也碰到过！核心原因是你直接把未编码的链接和特殊字符放进了mailto的body参数里，而mailto协议的查询参数是遵循URL规范的，特殊字符（比如:、/、空格、换行）会破坏参数结构，导致邮件客户端解析异常。下面给你两种靠谱的实现方式：

方式1：手动URL编码（适合简单内容） #

如果你只是要添加纯文本链接，只需要把body里的所有内容做URL编码就行——把空格换成%20，换行换成%0D%0A，链接里的特殊字符（比如:换成%3A，/换成%2F）也转义。

举个例子，要预填的内容是：

请查看这份文档：https://your-domain.com/doc/123
有问题随时联系我。

编码后的body是：%E8%AF%B7%E6%9F%A5%E7%9C%8B%E8%BF%99%E4%BB%BD%E6%96%87%E6%A1%A3%EF%BC%9A%20https%3A%2F%2Fyour-domain.com%2Fdoc%2F123%0D%0A%E6%9C%89%E9%97%AE%E9%A2%98%E9%9A%8F%E6%97%B6%E8%81%94%E7%B3%BB%E6%88%91%E3%80%82

对应的HTML标签：

<a href="mailto:?subject=%E6%96%87%E6%A1%A3%E5%8F%8D%E9%A6%88&body=%E8%AF%B7%E6%9F%A5%E7%9C%8B%E8%BF%99%E4%BB%BD%E6%96%87%E6%A1%A3%EF%BC%9A%20https%3A%2F%2Fyour-domain.com%2Fdoc%2F123%0D%0A%E6%9C%89%E9%97%AE%E9%A2%98%E9%9A%8F%E6%97%B6%E8%81%94%E7%B3%BB%E6%88%91%E3%80%82">
  发送文档链接邮件
</a>

方式2：用JavaScript动态生成（推荐，适合复杂内容） #

手动编码容易出错，尤其是内容多的时候。用encodeURIComponent函数自动编码所有特殊字符，兼容性拉满：

<button onclick="sendDocEmail()">发送文档邮件</button>

<script>
function sendDocEmail() {
  // 定义邮件主题和正文内容
  const emailSubject = "文档待查阅";
  const documentLink = "https://your-domain.com/doc/123";
  const emailBody = `请查看这份文档：${documentLink}\n\n如果有任何问题，欢迎随时联系我。`;

  // 对主题和正文进行URL编码
  const encodedSubject = encodeURIComponent(emailSubject);
  const encodedBody = encodeURIComponent(emailBody);

  // 构建完整的mailto链接并唤起邮件客户端
  window.location.href = `mailto:?subject=${encodedSubject}&body=${encodedBody}`;
}
</script>

额外注意事项 #

• 关于HTML格式的链接：有些邮件客户端支持在body里写HTML（比如Gmail），但Lotus Notes对HTML的支持很有限。如果想尝试锚文本链接，可以把emailBody写成HTML格式再编码，但大概率会被部分客户端当作纯文本显示，所以更稳妥的是用纯文本链接——大部分邮件客户端都会自动识别并转为可点击的链接。
• 换行处理：用\n（对应编码后的%0A）或者\r\n（对应%0D%0A）都可以，大部分客户端都能正确解析换行。

这样处理后，不管是Gmail还是Lotus Notes，都能正确解析预填的邮件内容和文档链接啦！

内容的提问来源于stack exchange，提问作者Naresh Kumar Gnanakrishnan