EmailJS 发送可点击超链接教程

本文详解了在 EmailJS 中正确发送可点击超链接的关键技巧与常见陷阱：由于 EmailJS 模板引擎会转义 HTML 且不识别无协议的 URL（如缺少 `https://`），直接传递内联 HTML 字符串会导致链接失效或仅显示为纯文本；真正可靠的做法是“结构与数据分离”——在模板中静态编写 `` 标签并用 `{{link}}` 占位，前端仅传入完整、安全、已编码的 HTTPS 链接，从而确保邮件在 Gmail、Outlook 等主流客户端中 100% 可点击、可追踪，同时兼顾安全性、可维护性与生产环境合规性。

EmailJS 默认不支持直接传递内联 HTML 字符串渲染超链接，核心原因是 URL 缺少协议（如 `https://`），且 HTML 内容易被模板引擎转义；推荐做法是在模板中定义锚点标签，仅通过动态变量传入安全、完整的 URL。

在使用 EmailJS 发送含超链接的邮件时，常见误区是试图将完整 HTML 片段（如 ...）作为字符串变量传入模板——这不仅会导致链接失效（仅显示文本），还可能因 HTML 被自动转义而完全失去可点击性。

根本原因有二：

1. URL 协议缺失：你的 link 变量值为 "localhost:3000/approval/..."，缺少 http:// 或 https:// 协议头，导致浏览器/邮件客户端无法识别为有效链接；
2. 模板渲染机制限制：EmailJS 模板中的 {{{ message }}} 虽为“不转义”语法（三个大括号），但若传入的是已拼接好的 HTML 字符串，仍可能受邮箱客户端兼容性或服务端安全策略影响，实际渲染不可靠。

✅ 正确方案：分离结构与数据

• 在 EmailJS 模板中静态编写 标签，仅用 {{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 中设置 

  emailjs.sendForm('service_xxx', 'template_yyy', form.current, 'user_zzz')
    .then(() => console.log('Email sent successfully'))
    .catch((err) => console.error('EmailJS error:', err));
};

对应 EmailJS 模板（后台编辑）应包含：

  View Timesheet

⚠️ 注意事项：

• 生产环境严禁使用 localhost 作为邮件链接目标，收件人无法访问；必须部署真实域名并启用 HTTPS；
• 对 URL 中的动态参数（如邮箱、月份）建议使用 encodeURIComponent() 编码，防止特殊字符破坏链接；
• 添加 target="_blank" 和 rel="noopener" 提升安全性与用户体验；
• 若需多链接或复杂 HTML，可扩展模板变量（如 {{ctaText}}, {{buttonStyle}}），但始终遵循「模板写结构、JS 传数据」原则。

此方式既符合 EmailJS 最佳实践，也兼容主流邮箱客户端（Gmail、Outlook、Apple Mail），确保链接 100% 可点击、可追踪。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《EmailJS 发送可点击超链接教程》文章吧，也可关注golang学习网公众号了解相关技术文章。