如何使用JavaScript生成含HTML格式的可直接发送邮件草稿

问题根因 #

• 语法错误：主题参数的拼接使用了逗号运算符，("Stuff bought by: ", email)的写法会直接丢弃前面的文本，最终主题仅会显示email变量的内容
• mailto协议的body参数默认仅支持纯文本，直接传入HTML标签不会被邮件客户端解析为富文本，只会原样输出标签内容
• 所有URL参数未做编码处理，空格、特殊符号等会导致整个URL结构解析异常，出现乱码

调整方案 #

方案1：继续使用mailto协议（折衷方案） #

mailto协议本身不支持注入HTML富文本，可将链接直接以明文形式放在body中，绝大多数邮件客户端会自动识别明文链接为可点击的跳转元素，实现效果和预期一致：

const receiveEmail = "isflibrary.net.com.de.xxx";
const ccEmail = "emailCC";
const sendEmail = "user@example.com"; // 替换为实际的发件人邮箱变量
const emailSubject = `Stuff bought by: ${sendEmail}`;
const emailBody = `Visit mywebsite.com!
https://www.mywebsite.com`;

// 所有参数必须做URL编码避免解析错误
const mailtoLink = `mailto:${receiveEmail}?cc=${encodeURIComponent(ccEmail)}&subject=${encodeURIComponent(emailSubject)}&body=${encodeURIComponent(emailBody)}`;
location.href = mailtoLink;

方案2：支持HTML富文本邮件（替换mailto实现） #

如果需要使用自定义HTML样式的富文本邮件，需要替换实现逻辑：

• 服务端发信：前端将邮件内容、收件人等参数传给后端接口，后端通过发信组件组装HTML内容完成发信，支持完全自定义的HTML格式
• 桌面端原生调用：如果是Electron等桌面端开发场景，可以直接调用系统邮件客户端的原生API注入HTML内容，无需走mailto协议

效果参考 #

现有错误效果 #

预期实现效果 #

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