内源分析项目:HTML邮件模板的那些坑

世界也不是一直在进步的,有些公司和产品会停留在原地。[read more=”点击阅读更多” less=”收起阅读”]

今天我说说项目中邮件模板的那些坑。顺便会埋汰下某家大公司。

今天的任务

上一篇文章的任务清单我们了解到:需要用java自动发送出一份邮件。

邮件将会定时发给部门所有人员,这就要求必须有一个邮件模板。传统的邮件是一种富文本格式,邮件中可以包含:简单文本,HTML页面(包括内联的图片,音频,甚至flash)。此外,还可以添加各种格式的附件(只要服务器不拒绝)。

听到这里,前端人员就要笑了。这不是我的特长吗?抡起CSS。加上各种HTML标签也给哥上,这还不够?JAVASCRIPT大神走起。恩。挺好笑的。

开搞设计

作为伪前端人员,我设计了这样一套邮件模板代码。他在浏览器显示效果是这样的。

以下是HTML代码

<!DOCTYPE html>
<!-- saved from url=(0042)http://v3.bootcss.com/examples/dashboard/# -->
<html xmlns:th="http://www.thymeleaf.org">

   <head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="http://v3.bootcss.com/favicon.ico">

    <title>XX开发部-内源周报</title>

    <!-- Bootstrap core CSS -->
    <link href="bootstrap.min.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="dashboard.css" rel="stylesheet">
     <script type="text/javascript" src="../static/lib/chart/Chart.bundle.js"></script>
     <script type="text/javascript" src="../static/lib/chart/DengUtil.js"></script>
   </head>
  <body>

    <div class="container-fluid">

        <div class="col-md-11 main">
          <h1 class="page-header">XX内源周报</h1>

          <div class="row placeholders">
            <div class="col-xs-6 col-sm-3 placeholder">
                <canvas id='wow' width="200" height="200"></canvas>
              <h4>钢铁侠</h4>
              <span class="text-muted">钢铁侠组口号:软件我们才是核心!</span>
            </div>
            <div class="col-xs-6 col-sm-3 placeholder">
                 <canvas id='wow' width="200" height="200"></canvas>
              <h4>美国队长</h4>
              <span class="text-muted">美国队长口号:把控全局靠我!</span>
            </div>
            <div class="col-xs-6 col-sm-3 placeholder">
                 <canvas id='wow' width="200" height="200"></canvas>
              <h4>蝙蝠侠</h4>
              <span class="text-muted">蝙蝠侠口号:流量的中转站!</span>
            </div>
            <div class="col-xs-6 col-sm-3 placeholder">
                 <canvas id='wow' width="200" height="200"></canvas>
              <h4>XX团队</h4>
              <span class="text-muted">XX团队:质量之保证,颜值之担当</span>
            </div>
          </div>
           <!-- group start-->
          <h2 class="sub-header">钢铁侠们排名</h2>
          <div class="table-responsive">
            <table class="table table-striped">
              <thead>
                <tr>
                   <th>xx号</th>
          <th>xx名</th>
                  <th>xx有效issue数</th>
                  <th>xxMr数量</th>
                  <th>总分</th>
                </tr>
              </thead>
              <tbody id='qosRank'>
              <tr th:each="qos: ${qos}" >
                  <td th:text="${qos.employNum}" />
                  <td th:text="${qos.name}" />
                  <td th:text="${qos.effectiveIssueCount}" />
                  <td th:text="${qos.mergedMrCount}" />
          <td th:text="${qos.personalScore}"/>
              </tr>
              </tbody>
            </table>
          </div>
      <!-- group end-->
      
      <!-- group start-->
          <h2 class="sub-header">美国队长组排名</h2>
          <div class="table-responsive">
            <table class="table table-striped">
              <thead>
                <tr>
                  <th>xx号</th>
          <th>xx名</th>
                  <th>xx有效issue数</th>
                  <th>xxMr数量</th>
                  <th>总分</th>
                </tr>
              </thead>
              <tbody id='cxbRank'>
                 <tr th:each="cxb: ${cxb}">
                     <td th:text="${cxb.employNum}" />
                     <td th:text="${cxb.name}" />
                     <td th:text="${cxb.effectiveIssueCount}" />
                     <td th:text="${cxb.mergedMrCount}" />
           <td th:text="${cxb.personalScore}" />
                 </tr>
              </tbody>
            </table>
          </div>		  
      <!-- group end-->
      
      
      <!-- group start-->
          <h2 class="sub-header">蝙蝠侠们排名</h2>
          <div class="table-responsive">
            <table class="table table-striped">
              <thead>
                <tr>
                  <th>xx号</th>
          <th>xx名</th>
                  <th>xx有效issue数</th>
                  <th>xxMr数量</th>
                  <th>总分</th>
                </tr>
              </thead>
                 <tbody id='frmRank'>
                    <tr th:each="frm: ${frm}" >
                        <td th:text="${frm.employNum}" border="1"/>
                        <td th:text="${frm.name}" border="1"/>
                        <td th:text="${frm.effectiveIssueCount}" border="1"/>
                        <td th:text="${frm.mergedMrCount}" border="1"/>
            <td th:text="${frm.personalScore}" border="1"/>
                    </tr>
                </tbody>
            </table>
          </div>		  
      <!-- group end-->
      
      <!-- project group start-->
          <h2 class="sub-header">项目组排名</h2>
          <div class="table-responsive">
            <table class="table table-striped">
              <thead>
                <tr>
                  <th>排名</th>
          <th>项目组名</th>
                  <th>Issue数</th>
                  <th>Mr数量</th>
                  <th>总分</th>
                </tr>
              </thead>
              <tbody id="prjRank">
                <tr th:each="projectRank: ${projectRank}" >
                    <td th:text="${projectRank.NAME}" border="1"/>
            <td th:text="${projectRank.NAME}" border="1"/>
                    <td th:text="${projectRank.ISSUESCORE}" border="1"/>
                    <td th:text="${projectRank.MRSCORE}" border="1"/>
                    <td th:text="${projectRank.PROJECTSCORES}" border="1"/>
                </tr>              
              </tbody>
            </table>
          </div>		  
      <!-- group end-->

      
        </div>
      </div>
    </div>

</body>
<script type="text/javascript">
drawChart("qos","qosRank");
drawChart("frm","frmRank");
drawChart("cxb","cxbRank");
drawChart("project","prjRank");
</script>

</html>

 

线程跑起来,JAVA后台发出的邮件Outlook顺利收到!这封邮件是这样显示的。卸妆后的效果简直惊悚。

那么,我们问问为什么?

考察了一番。原因出在OutLook渲染HTML的Render。微软一直采用自家的M$ Word引擎,类似IE的家风,独立门户,不管风吹浪打,我自岿然不动。带来的后果是HTML水平手工倒退十几年。那时候还没有<div>标签,HTML也只有一小撮标签集合。和Netscape 0.1版本(如果有这个版本的话)渲染HTML效果不相伯仲吧。对此,微软的回应是

We will continue to use Word for creating e-mail messages because we believe it’s the best e-mail authoring experience around.

大意就是,不好意思,我们觉得这种方式处理最好。

一大堆人看不下去了,还有热心者创建专门的站点批斗独裁者的作风。

email-standards.org 就是这么一个组织,从outlook 2007死磕到outlook 2017。十多年微软还是这么坚持着,口吻一直是:我们喜欢你们其它开发者的做法,但考虑到安全和各方面的因素权衡,我们将坚持手拿Word引擎安静的做个美男子。

这个问题,Channel7某位同学开个一个帖子

没办法,为了邮件在各个终端上都能正常显示。我们得用HTML的最小集合去创建邮件模板。这意味着你可以使用的标签大概有限的如下:

table,td,tr 支持border,cellpadding, cellspacing width,height,bgcolor,align,alt属性
img 支持width,height

而且还不能使用外部样式支持:最好用内联实现,这样写<table th:style=”margin-top:5px”>

知道了这点,重新开始设计模板。老实的用table/tr/td/tbody这样的布局。什么div啊,float布局啊。别想了。。新的模板叫  moutainTop.html ,这是一套thymeleaf模板。代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>XX开发部-内源周报</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body th:style="'margin: 0; padding: 0;'">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
        <td th:style="'padding: 10px 0 30px 0;'">
            <table align="center" border="0" cellpadding="0" cellspacing="0" width="500" th:style="'border: 1px solid #cccccc; border-collapse: collapse;'">
                <tr>
                    <td align="center" bgcolor="#70bbd9" th:style="'padding: 40px 0 30px 0; color: #153643; font-size: 28px; font-weight: bold; font-family: Arial, sans-serif;'">
                        <img src="sample.jpg" th:src="|cid:${banner}|" alt="为了流控加油!" th:style="'display: block;'" />
                    </td>
                </tr>
                <tr>
                    <td bgcolor="#ffffff" th:style="'padding: 40px 30px 40px 30px;'">
                        <table border="0" cellpadding="0" cellspacing="0" width="100%">
                            <tr>
                                <td th:style="'color: #153643; font-family: Arial, sans-serif; font-size: 24px;'">
                                    <b>流控内源周报</b>
                                </td>
                            </tr>
                            <tr>
                                <td th:style="'padding: 20px 0 30px 0; color: #153643; font-family: Arial, sans-serif; font-size: 16px; line-height: 10px;'">
                                    <b th:text="${period}">当前日期</b>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <table border="0" cellpadding="0" cellspacing="0" width="100%">
                                        <tr>
                                            <td width="260" valign="top">
                                                <table border="0" cellpadding="0" cellspacing="0" width="100%">
                                                    <tr>
                                                        <td>
                                                            <img src="sample.jpg" th:src="|cid:${qos}|" alt=""  th:style="'display: block;'" />
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td align="center" th:style="'padding: 25px 0 0 0; color: #153643; font-family: Arial, sans-serif; font-size: 16px; line-height: 16px;'">
                                                            <b>钢铁侠组口号:软件我们才是核心!</b>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </td>
                                            <td th:style="'font-size: 0; line-height: 0;'" width="20">
                                                &nbsp;
                                            </td>
                                            <td width="260" valign="top">
                                                <table border="0" cellpadding="0" cellspacing="0" width="100%">
                                                    <tr>
                                                        <td>
                                                            <img src="sample.jpg" th:src="|cid:${cxb}|" alt="" th:style="'display: block;'"  />
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td align="center" th:style="'padding: 25px 0 0 0; color: #153643; font-family: Arial, sans-serif; font-size: 16px; line-height: 16px;'">
                                                            <b>美国队长口号:把控全局靠我!</b>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                            <tr>
                                <td th:style="'font-size: 0; line-height: 100px;'" width="100%">
                                    &nbsp;&nbsp;&nbsp;&nbsp;
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <table border="0" cellpadding="0" cellspacing="0" width="100%">
                                        <tr>
                                            <td width="260" valign="top">
                                                <table border="0" cellpadding="0" cellspacing="0" width="100%">
                                                    <tr>
                                                        <td>
                                                            <img src="sample.jpg" th:src="|cid:${frm}|" alt=""  th:style="'display: block;'" />
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td align="center" th:style="'padding: 25px 0 0 0; color: #153643; font-family: Arial, sans-serif; font-size: 16px; line-height: 16px;'">
                                                            <b>蝙蝠侠口号:流量的中转站!</b>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </td>
                                            <td th:style="'font-size: 0; line-height: 0;'" width="20">
                                                &nbsp;
                                            </td>
                                            <td width="260" valign="top">
                                                <table border="0" cellpadding="0" cellspacing="0" width="100%">
                                                    <tr>
                                                        <td>
                                                            <img src="sample.jpg" th:src="|cid:${project}|" alt=""  th:style="'display: block;'"  />
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td align="center" th:style="'padding: 25px 0 0 0; color: #153643; font-family: Arial, sans-serif; font-size: 16px; line-height: 16px;'">
                                                            <b>XX团队:质量之担当,颜值之担当</b>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>

                <tr>
                    <td bgcolor="#ee4c50" th:style="'padding: 30px 30px 30px 30px;'">
                        <table border="0" cellpadding="0" cellspacing="0" width="100%">
                            <tr>
                                <td th:style="'color: #ffffff; font-family: Arial, sans-serif; font-size: 14px;'" width="75%">
                                    &reg; brougt to you by XX@XX软件悍码队<br/>
                                    <a href="#" th:href="@{${baseUrl}}" th:style="'color: #ffffff;'"><font color="#ffffff">排名数据详细</font></a> 请点击链接
                                </td>
                                <td align="right" width="25%">
                                    <table border="0" cellpadding="0" cellspacing="0">
                                        <tr>

                                            <td th:style="'font-size: 0; line-height: 0;'" width="20">&nbsp;</td>
                                            <td th:style="'font-family: Arial, sans-serif; font-size: 12px; font-weight: bold;'">
                                                <a href="http://3ms.huawei.com/km/groups/3169159/home?l=zh-cn" th:style="'color: #ffffff;'">
                                                    <img src="sample.jpg" th:src="|cid:${banner}|" alt="Facebook" width="38" height="38" th:style="'display: block;'" border="0"  />
                                                </a>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>


</body>
</html>

最终效果:

关于微软的这段黑历史,不知道还要刷多久。IE基本上没戏,所以Edge才会出来。

[/read]

发表评论

电子邮件地址不会被公开。 必填项已用*标注