SpringBoot 发送 Html 格式的 Email

SpringBoot 发送 Html 格式的 Email。> 注意:Email 中所有的 js 代码都会被过滤掉 ​ 由于业务中需要发送统计邮件,天真的以为直接嵌入 vue 页面就行,结果所有 js 代码、js 链接和 css 链接都被过滤了。只能退而求其

注意:Email 中所有的 js 代码都会被过滤掉

​ 由于业务中需要发送统计邮件,天真的以为直接嵌入 vue 页面就行,结果所有 js 代码、js 链接和 css 链接都被过滤了。只能退而求其次,用原生 Html 去写。也没有找到合适的原生 Html 框架,就全手敲了。

官网文档

Email :: Spring Framework

SpringBoot 依赖

1
2
3
4
5
<!-- 邮件 -->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-mail</artifactId>
</dependency>

SpringBoot 配置

1
2
3
4
5
spring:
  mail:
    username: 发送邮件的邮箱(需要开通pop、smtp)
    host: smtp.exmail.qq.com(邮件发送服务器)
    password: 此处必须为授权码

Java 代码

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
/**
     * 发送html邮件
     *
     * @param toEmail 至电子邮件
     * @param title   标题
     * @param content 所容纳之物
     *///发送HTML邮件
public void sendHtmlMail(String toEmail, String title, String content) {
    //获取MimeMessage
    //面向对象的多态,javaMailSender.createMimeMessage(),多用途的网际邮件扩充协议
    MimeMessage message = javaMailSender.createMimeMessage();
    MimeMessageHelper mimeMessageHelper;

    try {
        mimeMessageHelper = new MimeMessageHelper(message, true);
        //邮件发送人
        mimeMessageHelper.setFrom(myConfig.getFromMail());
        //邮件接收人
        mimeMessageHelper.setTo(toEmail);
        //邮件主题
        mimeMessageHelper.setSubject(title);
        //邮件内容,HTML格式
        mimeMessageHelper.setText(content, true);
        javaMailSender.send(message);
    } catch (Exception e) {
        e.printStackTrace();
    }
}

public void sendSumInfoEmail() {
    URL url = getClass().getClassLoader().getResource("static/email.html");
    String content = FileUtil.readString(url, Charset.defaultCharset().name());
    // 替换模板内的标记
    content = content.replace("{{模板内标记}}", 变量);
    this.sendHtmlMail("xxxxxx@xx.com", "主题", content);
}

很简单,以上就是全部了,下面是 Html 模板的参考

Html 模板

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!DOCTYPE html>
<br lang="en">

<head>
   <meta charset="UTF-8">
   <title>大规模航测统计反馈邮件</title>
   <style>
       body {
           margin: 0%;
           padding: 0%;
           font-family: 'Courier New', Courier, monospace;
       }

       #app {
           margin: 0 5%;
       }

       .sum-info {
           line-height: 3em;
           text-indent: 2em;
           font-size: 14px;
       }

       #main {
           margin-top: 30px;
       }

       .process-frame {
           margin: 0 5px;
           height: 20px;
           background-color: #aaa;
       }

       .process-bar {
           height: 20px;
           background-color: #28C055;
           height: 100%;
           color: white;
           display: flex;
           justify-content: left;
           align-items: center;
       }

       .process-text {
           padding: 0 5px;
       }

       .red {
           background-color: #cc0000;
       }

       fieldset {
           padding: 30px 30px;
           border-radius: 8px;
           border-width: 2px;
           border-color: rgba(204, 0, 0, 0.5);
       }

       legend {
           padding: 0 15px;
           font-weight: 900;
           font-size: 1em;
           ;
       }

       .email-table {
           margin-top: 20px;
           padding: 0%;
           text-align: center;
           width: 100%;
           border-spacing: 0;
           border-collapse: collapse;
           border-radius: 8px;
       }

       .email-table th {
           padding: 9px 15px;
           margin: 0%;
           width: 200px;
           font-size: 0.5em;
           border: 1px solid #eee;
           border-spacing: 0;
           font-weight: 600;
           /* background-color: rgba(240, 240, 240, 1); */
       }

       .email-table td {
           padding: 9px 15px;
           font-size: 0.5em;
           border-color: #eee;
           border-style: solid;
           border-width: 1px;
           border-spacing: 0px;
       }

       .email-section {
           margin-top: 50px;
       }
   </style>
</head>

<body>
   <div class="app" id="app">
       <fieldset class="email-section">
           <legend>汇总统计</legend>
           <div class="layui-field-box">
               <div class="sum-info">
                   <p>
                       截至 <strong style="font-size:1.5em;color:#c00">{{now}}</strong>                       规划项目共 <strong style="font-size:1.5em;color:#c00">{{totalCount}}</strong> 个,
                       总面积 <strong style="font-size:1.5em;color:#c00">{{totalArea}}</strong> 万亩,
                       其中xx面积 <strong style="font-size:1.5em;color:#c00">{{surveyedArea}}</strong> 万亩,
                       进度 <strong style="font-size:1.5em;color:#c00">{{process}}</strong> %,
                       剩余xx面积 <strong style="font-size:1.5em;color:#c00">{{toSurveyArea}}</strong> 万亩。
                   </p>
               </div>
           </div>
       </fieldset>
       <legend class="email-section">进度<span style="font-size: 0.5em;color: rgba(0,0,0,0.3);">备注</span>
       </legend>
       <table class="email-table">
           <tr>
               <th>名称</th>
               <th>时间</th>
               <th>状态</th>
               <th>进度</th>
           </tr>
           {{projectSatistics}}
           <!--下面是要填到 {{projectSatistics}} 处的模板-->
           <!-- <tr>
               <td>January</td>
               <td>2020-01-01 12:00:00</td>
               <td>$100</td>
               <td>
                   <div class="process-frame">
                       <div class="process-bar" style="width: 100%;">
                           <div class="process-text">
                               100%
                           </div>
                       </div>
                   </div>
               </td>
           </tr> -->
       </table>
   </div>
</body>

</html>

参考

Email :: Spring Framework

SpringBoot集成EMail_springboot集成mail_Small ink的博客-CSDN博客

[Layui - 极简模块化前端 UI 组件库](https://layui.dev)

Gear(夕照)的博客。记录开发、生活,以及一些不足为道的思考……