EmailJS 默认不支持直接传递内联 HTML 字符串渲染超链接，核心原因是 URL 缺少协议（如 https://），且 HTML 内容易被模板引擎转义；推荐做法是在模板中定义锚点标签，仅通过动态变量传入安全、完整的 URL。
emailjs 默认不支持直接传递内联 html 字符串渲染超链接，核心原因是 url 缺少协议（如 `https://`），且 html 内容易被模板引擎转义；推荐做法是在模板中定义锚点标签，仅通过动态变量传入安全、完整的 url。
在使用 EmailJS 发送含超链接的邮件时，常见误区是试图将完整 HTML 片段（如 <a href="...">...</a>）作为字符串变量传入模板——这不仅会导致链接失效（仅显示文本），还可能因 HTML 被自动转义而完全失去可点击性。
根本原因有二：
- URL 协议缺失：你的 link 变量值为 "localhost:3000/approval/..."，缺少 http:// 或 https:// 协议头，导致浏览器/邮件客户端无法识别为有效链接；
- 模板渲染机制限制：EmailJS 模板中的 {{{ message }}} 虽为“不转义”语法（三个大括号），但若传入的是已拼接好的 HTML 字符串，仍可能受邮箱客户端兼容性或服务端安全策略影响，实际渲染不可靠。
✅ 正确方案：分离结构与数据
- 在 EmailJS 模板中静态编写 <a> 标签，仅用 {{link}} 占位符绑定 URL；
- 前端仅传递纯净、合法的 URL 字符串（带协议、编码安全）；
- 避免在 JS 中拼接 HTML，提升可维护性与安全性。
示例修正代码如下：
立即学习“前端免费学习笔记（深入）”；
const getMessage = () => {
// ✅ 添加 https:// 协议，生产环境务必使用 HTTPS
const base = "https://yourdomain.com/approval/"; // 替换为真实域名
const link = `${base}${encodeURIComponent(employeeEmail)}/${month}/${year}`;
// ✅ 仅设置 URL 变量，不拼接 HTML
setEmailLink(link); // 假设你用 useState 管理该变量
};
const sendEmail = (e) => {
e.preventDefault();
// ✅ 将 link 作为独立字段传入表单（需确保 form 中有 name="link" 的 input）
const formData = new FormData(form.current);
formData.set('link', emailLink); // 或直接在表单 DOM 中设置 <input name="link" value={emailLink} hidden />
emailjs.sendForm('service_xxx', 'template_yyy', form.current, 'user_zzz')
.then(() => console.log('Email sent successfully'))
.catch((err) => console.error('EmailJS error:', err));
};对应 EmailJS 模板（后台编辑）应包含：
<a
href="{{link}}"
style="padding: 12px; border-left: 4px solid #d0d0d0; font-style: italic; text-decoration: none; color: #1a73e8;"
target="_blank"
rel="noopener"
>
View Timesheet
</a>⚠️ 注意事项：
- 生产环境严禁使用 localhost 作为邮件链接目标，收件人无法访问；必须部署真实域名并启用 HTTPS；
- 对 URL 中的动态参数（如邮箱、月份）建议使用 encodeURIComponent() 编码，防止特殊字符破坏链接；
- 添加 target="_blank" 和 rel="noopener" 提升安全性与用户体验；
- 若需多链接或复杂 HTML，可扩展模板变量（如 {{ctaText}}, {{buttonStyle}}），但始终遵循「模板写结构、JS 传数据」原则。
此方式既符合 EmailJS 最佳实践，也兼容主流邮箱客户端（Gmail、Outlook、Apple Mail），确保链接 100% 可点击、可追踪。
