仅需 5 步，用 JavaScript 直接通过前端发送电子邮件

者 | Mateusz Iwaniuk

译者 | 明明如月，责编 | 夕颜

出品 | CSDN（ID：CSDNnews）

文章配套代码: https://github.com/iwaniukooo11/email-sender

现在，即使是创建最基本的网站，程序员也必须使用现代的功能和技术。甚至像为你的朋友创建简单的投资组合这样的基本项目也可能涉及到一些问题，比如从联系人表单接收数据。有很多方法可以读取这些数据。你可以将表单与数据库连接起来，然后从数据库中读取传入的消息来实现功能，但这样做会给不懂技术的客户造成困难。

你为什么不通过发送电子邮件传输信息？

不使用数据库就能接收到传入的消息，绝对是最佳选择，也是最方便用户的选择。但问题来了—如何实现呢？你可能认为需要使用某种后端语言。

实际上，你不必使用任何如 php 或 python 这种后端语言，你甚至不需要用到 node.js！你需要的就是一个简单的EmailJS 库。

本文将介绍下面两个重要功能:

配置 emailjs 帐户
使用 JS 发送电子邮件

请注意，在我的项目中，我使用了 gulp 和 webpack，我在 src 文件夹存放源码，dist 存放最终发布版本的代码。

我将分 5 个步骤向你展示如何从头开始构建电子邮件发送器。

步骤1-用 HTML 创建表单

首先需要创建一个 HTML 表单。你不必放置像 required 或 max 这种验证属性，因为稍后，preventDefault 函数将在你的提交事件上运行，它会让这些属性的处理失效。

表单中最重要的是为每个输入放置 name 属性，后面会用到。

我的非常简单的表单是这样的:

src/html/index.html

 <form class="form"> <input name='name' type="text" placeholder="Your name..." class="form__input" /> <input name='topic' type="text" placeholder="Topic..." class="form__input" /> <textarea name='message' type="text" placeholder="Your Message..." class="form__input" ></textarea>

 <input type="submit" value="send" class="form__input form__input--button"> </form>

步骤2-注册成为 email 用户

要配置你的电子邮件，你必须注册电子邮件服务。别担心—使用这个网站非常方便和省时。

登入后，系统会询问你的电子邮件服务，它位于个人电子邮件服务区（personal email service）。在我的例子中，我选择了 gmail。

然后，你需要连接你的 gmail 帐户。这将用来发送电子邮件给你客户。例如，如果你关联了 xyz@gmail.com 账户，你后续发送的邮件都将从这个邮箱发出。所以不要担心“ Send email on your behalf” 这个授权信息—这正是你需要的！

连接完 gmail 账户后，点击添加服务（add service）按钮。

步骤3-创建邮件模板

如果你已经成功连接了你的 gmail 账户，你现在应该在信息中心中。现在需要创建电子邮件模板了。

切换到电子邮件模板卡，并单击创建一个新的模板（create a new template）。界面非常友好，所以创建模板不会有任何问题。

你可以选择模板的名称和 ID。我称之为“我的神奇模板（my_amazing_template）”。

接下来，你必须指定邮件的内容。

模板的变量值来自 input 中的 `name` 属性。你已将变量插入`{{{}}}`符号中。

不要忘记在“收件人”部分 (右侧) 添加电子邮件地址。你的电子邮件将被发送到该电子邮件地址上。截图中的收件人邮箱是我自己的公司邮箱。

这是我的简单模板，它使用来自 HTML 表单里的 3 个变量。我还指定了接收电子邮件的主题。

步骤4-保存 API 密钥

这部分没什么特别的。Emailjs 共享授权 API 密钥，将在发送电子邮件时使用。当然，放这些钥匙最好的地方是`.env` 配置。但是因为我使用的是简单的静态文件，我不想使用服务器配置，所以我将它们保存在 apikeys 文件中，然后再将它们导入。

你的 USER_ID 位于 Account > API Keys 菜单下。

TEMPLATE_ID 位于模板的标题下面。

这是我基于不存在的 keyssrc / js / apikeys. js 的示例配置.

src/js/apikeys.js

export default { USER_ID :'user_DPUd-rest-of-my-id', TEMPLATE_ID:'my_amazing_template'}

如果需要将源码发布到 GITHUB，不要忘记将 APIKEYS 文件添加到 .GITIGNORE文件中

步骤5-发送电子邮件

现在是该项目最后也是最重要的部分的了。现在我们必须使用 javascript 发送电子邮件。

首先，你必须下载 emailjs 包。

npm i emails-com

然后，转到 js 文件，导入库和 apikeys。

src/js/main.js

import emailjs from 'emailjs-com'import apiKeys from './apikeys'

现在是编写发送电子邮件功能的时候了

src/js/main.js

const sendEmail = e => { e.preventDefault

 emailjs .sendForm('gmail', apiKeys.TEMPLATE_ID, e.target, apiKeys.USER_ID) .then( result => { console.log(result.text) }, error => { console.log(error.text) } )}

sendForm 函数有4个参数:

你的电子邮件的 ID，在这里:

TEMPLATE_ID 来自 apikey 文件,

事件对象来自你的表单提交

USER_ID 来自 apikey 文件,

最后，查找表单并添加提交事件监听器：

src/js/main.js

const form = document.querySelector('.form')form.addEventListener('submit',sendEmail)

正如我前面提到的，由于 `preventDefault` 函数，属性验证将无法工作。你必须使用 JS 自己进行验证和清除输入。

以上就是全部内容，接下来让我们测试一下。

填写页面上的表单并发送。

我收到电子邮件，内容正是根据我们的模板和表单数据渲染出来的。

通过上图可以看出，所有的变量的值都填充到了正确的位置上。

总结

通过本文的介绍你会发现用 JS 发送邮件并非难事。

使用 emailjs，你可以简单的方式发送电子邮件。

我相信你未来的用户会很高兴收到来自他们网页上表单填写数据的t邮件，相信本文对你有帮助。

这篇文章的配套代码在这里: https://github.com/iwaniukooo11/email-sender

原文链接：

https://dev.to/iwaniukooo11/send-e-mails-directly-from-front-end-with-js-5d7d

本文为CSDN翻译文章，转载请注明出处。

☞我们想研发一个机器学习框架，6 个月后失败了

☞生产型机器学习已经没那么困难了？

☞视频 | 你不知道的"开源"60年秘史

☞GitHub标星10,000+，Apache项目ShardingSphere的开源之路

☞阿里技术专家告诉你，如何画出优秀的架构图？

☞加拿大API平台如何做到30%为中国明星项目？创业老兵这样说……

文是outlook的实用基础篇，都是图片的格式，需要的小伙伴可以把这个连载作为入门的教程进行学习掌握。当然了，outlook不仅是商务办公用，你在自己的电脑上也可以将此工具作为平时收邮件的默认工具哦。

课程都是从实际工作中而来，对常见操作进行讲解，基于2010版本，其他版本均通用，以图片为主，每一步都清晰明了。大家可以自行安装好邮件客户端Outlook后进行实践学习即可。

Outlook的基本设置跟其他office软件都是相通的，我们直接先打开从选项卡中的文件说起，如下：

点击”选项”：

如果你的电脑上outlook不是你的常用或默认邮件程序，请不用勾选上述的”启动选项”框；当然，如果是，强烈建议你将此设置为你的默认邮件系统,勾选此框。

我们再来看左侧栏中的选项 – 邮件，这里我用红色标注了格式部分，如下：

此处显示的是邮件编辑的三种格式，那么这三种格式的区别分别在哪里呢？

我们先看HTML（超文本链接语言）：

我们在编写邮件的时候，也可以直接通过菜单中的按钮进行邮件格式的转换，如下所示：

当我们插入附件的时候，我们可以看到专门有一个附件栏，附件将放入其中，我们在正文中输入带链接的文本的时候，会自动切换成超链接的形式，正文中如果添加图片，也可以直接在正文中显示出来。对于正文中的文字部分，我们是可以进行字体颜色等的设置的。

再来看看RTF（Rich Text Format），翻译过来是：丰富的语言格式。如下：

我们同样用上述方法比较，这个时候插入的附件，就不再是单独的一栏了，而是直接嵌入到了我们的邮件正文之中。当然，我们的网址仍然是以超链接的形式存在，图片也是直接显示在正文中。同样字体颜色这些也是可以进行设置的。

最后一个是纯文本的格式，对于它来说，支持的格式相当少。正文中无法插入图片，可以插入附件，显示的方式跟HTML一样，也是在一个单独的栏中体现；无法加入带链接的文本，正文中字体样式，大小，颜色什么的无法进行设置。大家可能觉得一无是处我干嘛用这个啊？！它的好处是：可在接收它的人员所使用的任何电子邮件软件中正确显示，还能有效防止病毒呢。

所以关于这个格式我们总结一下：HTML与RTF格式类似，这个设置没有具体章法，都是根据自己的喜好而定。如果对方告知你收到的邮件是乱码或者格式错乱，请将邮件格式改为纯文本。

另外，下面这个特别提醒大家，关于邮件的签名：

签名虽然不起眼，但是非常非常重要！

点击上图中的签名按钮，弹出：

点击上图中的“新建”按钮，弹出：

给你的签名取个名字，方便调用。确定之后在“编辑签名”栏中输入内容：

对于工作邮件，你可以输入：

姓名、职位、部门、分机号或其他联系方式、公司名称或寄信地点等必要信息。至少你要让人家知道你是谁！

完成上述之后，点击保存或确定即可。

一般第一次沟通，别人不知道你是谁的情况下，我们使用正规的签名，也显得正式和尊重，熟悉了之后，我们就可以使用短签名，所以Outlook比较人性化的提供了不同场景下使用不同签名的方式，大家可以看到在选择默认签名的时候有两个选项，一个是新邮件使用的签名，另一个是答复或转发邮件时使用的签名。你不同的邮箱也可以设置不同的签名。

上述同样的方法进行短签名的编辑之后，我们可以看到我最后的设置如下：

再来说说邮件的阅读窗格，有时候我们打开outlook的时候，突然发现一片未读邮件，强迫症忍不了，所以我们可以进行调整默认已读方式，不用双击邮件就可以直接将邮件的状态由未读转为已读。

点击“阅读窗格”，弹出：

勾选第一个，当邮件在等待设置的时间后直接自动变为已读；

勾选第二个，只要点击未读邮件就直接变成已读；

勾选第三个，空格键直接就可以滚动阅读邮件；

这些也是根据自己的习惯进行设置就好。

接下来是邮件到达的提示：

默认上述勾选，点击“桌面通知设置”，弹出：

我们可以根据上述两个滑标进行通知的显示时长以及透明度的设置。

继续往下，我们来看看日历界面及基本设置。

在选项中，我们可以通过调整工作时间及工作周选项来设置日历的显示方式，如下：

在日历的界面中，我们可以给别人设定阅读自己日历的权限，一般情况，我们看对方的日历是下面这种情况，如果你想了解你的下属或让你的下属知道你的形成，我们可以将日历权限进行开放。

在日历选项中，我们点击“忙/闲选项”：

弹出的对话框如下：

添加完人员之后，你在读取那里就可以选择“详细信息”，确定即可。这样在对方的邮箱日历界面你看到的就是下面这种：

除此之外，我们也不用担心不知道现在是多少周的问题了。同样可以设置：

勾选之后，就是下面这样了：

当然如果你在外企工作，有可能涉及两个时区，那么我们同样可以进行设置，方便安排一些跨国的会议等。

显示的界面如下：

今天先到这里，下节继续。

言

亲爱的读者，我们已经成功地发送了简单的文本邮件。但在实际应用中，我们可能还需要发送格式更加丰富的HTML邮件，或者包含附件的邮件。今天，我们就来探索如何使用Python来构建并发送这样的邮件。

一、发送HTML邮件

HTML邮件可以让你的邮件内容更加丰富多彩，包含图片、链接、样式等。在Python中，我们同样可以使用email模块来构建HTML邮件。

from email.mime.multipart import MIMEMultipart
from email.mime.text import MIMEText

# HTML邮件正文内容
html_content = """
<html>
<head></head>
<body>
    <h1>Hello, this is an HTML email from Python!</h1>
    <p>Here's a <a href="https://www.python.org">link to Python's website</a>.</p>
    <img src="cid:image1">  <!-- 注意：这里使用了cid引用，稍后我们将添加图片附件 -->
</body>
</html>
"""

# 创建一个多部分邮件对象
msg = MIMEMultipart('related')
msg['From'] = 'your_email@gmail.com'
msg['To'] = 'receiver_email@example.com'
msg['Subject'] = 'HTML Email with Python'

# 添加HTML邮件正文
msg_alternative = MIMEMultipart('alternative')
msg.attach(msg_alternative)
html_part = MIMEText(html_content, 'html', 'utf-8')
msg_alternative.attach(html_part)

# （可选）添加图片附件（这里仅为示例，实际发送时请确保图片文件存在）
# 注意：由于示例中HTML中引用了图片，我们需要在邮件中添加这个图片作为附件，并使用cid引用
# 这里为了简化，我们略过实际文件读取和添加的过程，仅展示逻辑
# ... 添加图片附件的代码会涉及到打开文件、读取内容、创建MIMEImage对象，并设置Content-ID为"image1"

# 发送邮件（假设SMTP连接和登录已经完成）
# ... 使用smtplib发送msg对象，与之前的示例类似

注意：上面的代码示例中，关于添加图片附件的部分被省略了，因为它涉及到文件I/O操作和MIMEImage对象的使用，这可能会让示例变得复杂。在实际应用中，你需要读取图片文件，创建MIMEImage对象，并将其附加到邮件中，同时确保HTML中的<img>标签通过cid属性正确引用该图片。

二、发送带附件的邮件

发送带附件的邮件与发送HTML邮件类似，但你需要创建一个多部分邮件（MIMEMultipart），并为每个部分（文本、HTML、附件等）设置不同的MIME类型。

from email.mime.base import MIMEBase
from email import encoders

# 假设我们要发送一个名为"example.txt"的文本文件作为附件
filename = 'example.txt'

# 读取文件内容并编码为base64
with open(filename, 'rb') as attachment:
    part = MIMEBase('application', 'octet-stream')
    part.set_payload((attachment).read())
encoders.encode_base64(part)

# 添加文件头信息
part.add_header('Content-Disposition', "attachment; filename= %s" % filename)

# 将附件添加到邮件中
msg.attach(part)

# 现在，msg对象包含了文本（或HTML）和附件，你可以使用smtplib发送它
# ... 发送邮件的代码与之前相同

结语

恭喜你，现在你已经掌握了使用Python发送文本邮件、HTML邮件以及带附件邮件的技能！这些技能将帮助你在自动化任务、通知系统或任何需要邮件通信的应用程序中大展拳脚。记得在实践中不断探索和尝试，你会发现Python在邮件处理方面的更多可能性。

在线咨询

上一篇：前端常见面试题总结-HTML篇
下一篇：一篇文章带你了解CSS3圆角知识

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

仅需 5 步，用 JavaScript 直接通过前端发送电子邮件

步骤5-发送电子邮件

总结

言

一、发送HTML邮件

二、发送带附件的邮件

结语

您的项目需求