Angular中mailto链接邮件正文换行失效问题求助

问题根源 #

mailto协议要求邮件主题和正文的内容必须经过URL编码，直接用\n或<br>不会被Gmail识别为换行——未编码的\n在URL中只是普通字符，邮件客户端不会将其解析为换行符。

可行方案 #

有两种稳定的实现方式：

方案1：手动替换换行为URL编码的%0D%0A

把字符串里的\n替换成%0D%0A（回车换行符，兼容绝大多数邮件客户端），同时要对主题和正文中的特殊字符（如空格、中文、特殊符号）做编码处理。

方案2：用encodeURIComponent自动编码全部内容

通过encodeURIComponent函数分别编码邮件主题和正文，确保所有特殊字符（包括换行、空格、符号）都符合URL规范，无需手动替换。

修改后的完整代码 #

推荐使用方案2，更简洁且不易出错：

// 先构建中文邮件正文
const emailBody = `准备开启一段前所未有的知识、灵感与成长之旅！我们非常荣幸地邀请您参加即将举办的「${this.event?.title}」活动。
无论您是想提升专业技能、探索全新兴趣，还是丰富学术经历，「${this.event?.title}」都能为您带来非凡体验。

活动日期：${this.event?.start_date}
活动地点：${this.event?.is_online ? this.event?.online_event_details?.platform : this.event?.venue_name}

请标记日历，准备体验知识分享、人脉拓展与精彩互动的融合盛宴。别错过这次重塑您摄影之路的黄金机会！
我们迫不及待地欢迎您参与「${this.event?.title}」，见证您的才华绽放！
活动链接：${this.eventUrl}/${this.event?.id}

此致，
${this.event?.institute}
[您的职位]
[联系方式]`;

// 编码主题和正文，生成合规的mailto链接
const subject = encodeURIComponent(`🌟 点燃学习热情！诚邀您参与「${this.event?.title}」`);
const encodedBody = encodeURIComponent(emailBody);
this.emailText = `mailto:?subject=${subject}&body=${encodedBody}`;

补充说明 #

• encodeURIComponent会自动把字符串中的\n转换为%0A，Gmail能正确识别为换行；
• 主题部分必须编码，避免特殊符号（如🌟、空格）破坏URL结构；
• 无需使用<br>，因为mailto的body默认是纯文本格式，HTML标签不会被解析。

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