前端用js发送邮箱前端发送邮箱

前端发送邮箱

安装包依赖
邮箱授权码
demo eg:
- picture
- - 页面发送内容
  - 有效接受效果
- code
- 参考别人写的code
说明

安装包依赖

yarn add nodemailer

nodemailer官网

邮箱授权码

邮箱授权码: 邮箱授权码需要开通，以QQ邮箱为例，其它大同小异
在这里插入图片描述

demo eg:

picture

页面发送内容

在这里插入图片描述

有效接受效果

在这里插入图片描述

code


<script lang="ts" setup>
// yarn add nodemailer
// import nodemailer from 'nodemailer';
const nodemailer = require('nodemailer');

const send = () => {
  message.info('开始发送');
  let dom = document.getElementById('emailCon') as HTMLDivElement;

  sendEmail('xxxxxx@qq.com', 'xxxxxx@qq.com', dom.innerHTML, 'xxxxxxx');
};

/**
 *
 * @param fromEmail 发送者邮箱
 * @param toEmail 接收者邮箱
 * @param sendCon 发送内容
 * @param pass smtp授权密码
 * @param host 邮箱服务的host
 */
const sendEmail = (
  fromEmail: string,
  toEmail: string,
  sendCon: string,
  pass: string,
  host: string = 'smtp.qq.com',
) => {
  /**
   * 邮箱服务的host:
   * qq: smtp.qq.com
   * 163: smtp.163.com
   */
  let transporter = nodemailer.createTransport({
    host, //发送者邮箱服务端口,参考 https://github.com/nodemailer/nodemailer-wellknown/blob/master/services.json
    port: 465,
    secure: true,
    auth: {
      user: fromEmail, //发送者邮箱
      pass, //发送者邮箱授权码，不是登录或者独立密码，是你设置的smtp授权密码
    },
  });
  let mailOptions = {
    from: `夜空孤狼啸 "<${fromEmail}>"`, // sender address
    to: toEmail, // list of receivers
    subject: '测试邮箱', // Subject line
    text: 'Hello world?texttexttexttext', // plain text body
    html: sendCon, // html body
  };
  transporter.sendMail(mailOptions, (err: any, info: any) => {
    if (err) {
      console.log(err);
      message.error('发送失败');
    } else {
      console.log(info);
      message.success('发送成功');
    }
  });
};
</script>

<template>
  <Layout name="nodemailer 发送邮件" title="nodemailer" titleWidth="130px">
    <template #btn>
      <a-button type="primary" @click="send">发送</a-button>
    </template>
    <template #content>
      <div class="con w-px-600 h-px-600" contentEditable="true" id="emailCon"></div>
    </template>
  </Layout>
</template>

<style lang="less" scoped>
.con {
  outline: 1px solid #ccc;
}
</style>

参考别人写的code

'use strict';  
  
// 引入nodemailer模块  
const nodemailer = require('nodemailer');  
  
// 创建邮件传输器  
// 这里我们使用的是QQ邮箱的SMTP服务器  
// 注意：确保你的QQ邮箱已经开启了SMTP服务，并且获取了授权码  
const transporter = nodemailer.createTransport({  
  service: 'QQ', // 使用QQ邮箱的SMTP服务  
  port: 465, // SMTP端口号，通常SMTP over SSL的端口是465  
  secure: true, // 使用SSL连接  
  auth: {  
    user: '你的QQ邮箱地址', // 填写你的QQ邮箱地址  
    pass: '你的授权码', // 填写你在QQ邮箱中获取的授权码，不是登录密码  
  },  
});  
  
// 定义邮件的选项  
const mailOptions = {  
  from: `"发件人名称" <你的QQ邮箱地址>`, // 发件人的邮箱地址和名称  
  to: '收件人邮箱地址', // 收件人的邮箱地址  
  subject: '邮件主题', // 邮件的标题  
  text: '纯文本内容', // 邮件的纯文本内容（如果同时定义了html，则html会被优先使用）  
  html: '<h1>HTML内容</h1>', // 邮件的HTML内容  
  // 如果需要添加附件，可以定义attachments数组  
  attachments: [  
    {  
      filename: '附件1.jpg', // 附件的文件名  
      path: '附件1的本地路径或URL', // 附件的本地文件路径或网络URL  
      cid: 'myImage1', // CID，用于在HTML内容中引用该图片  
    },  
    {  
      filename: '附件2.docx',  
      path: '附件2的本地路径或URL',  
      cid: 'myDocument',  
    },  
    // 可以继续添加更多附件...  
  ],  
};  
  
// 发送邮件  
transporter.sendMail(mailOptions, (error, info) => {  
  if (error) {  
    // 如果发送邮件过程中出错，则打印错误信息  
    console.error('发送邮件时出错:', error);  
    return;  
  }  
  // 如果邮件发送成功，则打印相关信息  
  console.log('邮件发送成功:', info);  
  // info对象包含了邮件发送的详细信息，如messageId等  
});  
  
// 备注：  
// 1. 确保已经通过npm安装了nodemailer模块  
// 2. 替换上述代码中的'你的QQ邮箱地址'、'你的授权码'、'收件人邮箱地址'等为实际的值  
// 3. 邮件的HTML内容中，如果引用了附件中的图片，可以通过<img src="cid:图片CID" />的方式引用  
// 4. attachments数组中可以添加多个附件对象，每个对象定义了附件的文件名、路径和CID等信息  
// 5. 发送邮件时，如果发生错误，会在回调函数的error参数中返回错误信息  
// 6. 如果邮件发送成功，回调函数的info参数会包含邮件的详细信息，如messageId等

说明

在上面的代码中，我们将SMTP服务器的主机名设置为smtp.qq.com，端口号设置为465，并启用了SSL加密连接。同时，将your-email@qq.com和your-password替换为你自己的QQ邮箱地址和密码。

其他的邮件选项，如收件人、抄送地址、主题、正文内容、HTML内容和附件等，可以按照需求进行设置和修改。

请注意，QQ邮箱的SMTP服务器要求使用SSL/TLS加密连接，因此我们将secure选项设置为true来启用安全连接。

运行修改后的代码后，它将使用你的QQ邮箱账号发送一封带附件、抄送和HTML格式的测试邮件。
确保你的QQ邮箱已正确配置，并允许使用SMTP服务进行邮件发送。如果需要，你可能需要在QQ邮箱设置中启用SMTP服务，并使用QQ邮箱的授权码（不是登录密码）进行身份验证。详细的配置信息可以参考QQ邮箱提供的文档或联系他们的支持团队。

请记住，不同的邮箱服务提供商可能有不同的配置要求和限制，请根据你的实际情况进行相应的调整和处理。

如果你使用的是自己的邮箱服务，可以根据你的自有邮箱服务器的配置信息进行相应的更改。确保提供正确的SMTP服务器主机名、端口号和认证信息。

通过这篇文章，我们了解了如何使用Node.js的Nodemailer模块发送带附件、抄送和HTML格式的电子邮件。Nodemailer提供了丰富的功能和选项，使我们能够轻松地集成邮件服务到我们的应用程序中，满足各种需求。

请记住，在实际生产环境中，你可能需要进行额外的配置和安全性考虑。以下是一些建议和注意事项：