纯前端利用emailJS发送邮件

最新推荐文章于 2025-03-07 23:00:43 发布

Cxiaomu

最新推荐文章于 2025-03-07 23:00:43 发布

阅读量1.1w

点赞数 10

分类专栏： JavaScript 插件文章标签：前端 javascript

本文链接：https://blog.csdn.net/Cxiaomu/article/details/135124570

版权

JavaScript 同时被 2 个专栏收录

12 篇文章

订阅专栏

插件

8 篇文章

订阅专栏

技术栈：JavaScript + EmailJS

简介

因实际工作中有涉及到前端调用邮件发送的功能，了解到 EmailJS 插件，即出此文。
需要在 EmailJS 官网中注册一个邮箱账号，并创建邮件发送服务和邮件模板，获取serviceID和templateID，进而实现功能。

注册与配置

注册

官网注册账号： https://dashboard.emailjs.com/sign-up
官网登录账号： https://dashboard.emailjs.com/sign-in
注册完成后进行登，获取Public Key。
emailJS注册
emailJS登录
emailJS Public Key

配置

创建服务

登录之后按照下图创建一个服务。

点击创建按钮，出现服务弹窗
选择点击服务类型，默认生成服务Name、ServiceID
点击关联账户按钮，关联指定账户
点击创建服务按钮

emailJS创建服务弹窗
emailJS关联账户

emailJS授权账户信息
emailJS创建服务

创建邮件模版

服务创建完成后，创建邮件模板。
双括号{{ }}内的字段即是需要替换的变量名。

点击右侧菜单栏中 Email Template，跳转至模板列表，点击创建新模板
编辑模板内容，包含邮件标题、内容、收件箱、发送者等，编辑完成后，点击右上角保存

emailJS模板列表
emailJS编辑模版

实现

安装

官网SDK：https://www.emailjs.com/docs/sdk/installation/

npm install @emailjs/browser --save

js逻辑

sendEmail() {
      emailjs.init("PublicKey"); // TODO: 替换成自己的PublicKey
      emailjs.send("serviceID", "templateID", {  // TODO: 替换成自己的serviceID、templateID
        to_name: "收件人名称",
        from_name: "发件人名称",
        message: "测试邮件正文邮件正文",
        to_email: "xxxx@163.com",  // 接收邮箱
        })
        .then(function(response) {
        console.log("邮件发送成功！", response.status, response.text);
        }, function(error) {
        console.log("邮件发送失败...", error);
        });
    }

效果

emailJS效果