如何在 EmailJS 中正确发送可点击的 HTML 超链接-html教程-PHP中文网

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

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

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

根本原因有二：

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

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

在 EmailJS 模板中静态编写标签，仅用 {{link}} 占位符绑定 URL；
前端仅传递纯净、合法的 URL 字符串（带协议、编码安全）；
避免在 JS 中拼接 HTML，提升可维护性与安全性。

示例修正代码如下：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

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="%7B%7Blink%7D%7D" style="padding: 12px; border-left: 4px solid #d0d0d0; font-style: italic; text-decoration: none; color: #1a73e8;" target="_blank" rel="noopener">
  View Timesheet
</a>

⚠️ 注意事项：