Gmail无缘无故裁剪HTML电子邮件

时间:2019-06-10 20:33:38

标签: node.js email gmail sendgrid

我们使用node.js格式化由SendGrid发送给用户的html电子邮件,以确认帐户创建或类似操作。电子邮件已正确发送。所有内容正确显示。但是,在Gmail中,即使所有内容都正确显示,但最后仍会显示一条消息,指出电子邮件已被截断,然后单击链接以显示所有内容。如果单击,将得到相同的内容,但缺少样式。使用其他语言的同一封电子邮件将不会显示此消息。但是所有电子邮件都具有相同的结构。电子邮件小于30KB(代码+图片)

您将在上面找到扩展的代码。 (内容已更改) 接下来是ejs文件中生成的内容。

我阅读了很多次代码以发现任何问题(缺少标签)。 我尝试手动发送,但没有出现通知。 我计算了权重以确保它超过102KB。结果:最大30KB。 我将代码与其他没有此问题的代码进行了比较。结构没什么不同。只有内容不同。

<!DOCTYPE html>
<html>
    <head>
        <meta 
        http-equiv="Content-Type" 
        content="text/html; charset=utf-8" />
        <style>
            body{
                font-family:Tahoma,Verdana,sans-serif;
                font-size:14px;
                color:#000;
                margin:0
            }
            a{
                text-decoration:none
            }
            a.link{
                color:#EB3052;
                font-weight:700
            }
            a.button{
                background-color:#EB3052;
                color:#fff;
                padding:10px;
                border-radius:5px;
                text-transform:uppercase;
                font-size:12px;
                font-weight:700;
                letter-spacing:1px
            }
            a.button.decline{
                background-color:#f5f7f7;
                color:#EB3052;
                font-weight:400
            }
            ul{
                line-height:24px
            }
        </style>
    </head>
    <body>
        <div 
        style="
            width:100%; 
            height: 100%; 
            text-align:center; 
            font-family: Tahoma, Verdana, sans-serif; 
            background-color: #F5F7F6;
        " 
        align="center"
        >
            <table 
            width="600px" 
            cellspacing="0" 
            cellpadding="0" 
            border="0" 
            align="center" 
            style="
                padding: 14px;
            "
            >
                <tr>
                    <td 
                    height="32" 
                    width="30" 
                    style="padding: 14px;"
                    >
                        <a 
                        href="url"
                        >
                            <img 
                            src="url" 
                            border="0" 
                            alt="url" 
                            style="
                                max-height: 60px
                            " 
                            />
                        </a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <table 
                        width="100%" 
                        style="
                            background: #fff; 
                            text-align: left; 
                            font-size:16px; 
                            padding-top: 40px; 
                            padding-bottom: 40px;
                        "
                        >
                            <tr>
                                <td 
                                style="
                                    padding-left: 32px; 
                                    padding-right: 32px;
                                "
                                >
                                    <table 
                                    width="100%" 
                                    cellspacing="0" 
                                    cellpadding="0" 
                                    border="0"
                                    >
                                        <tr>
                                            <td>
                                                <div 
                                                style="
                                                    width:100%; 
                                                    height: 100%; 
                                                    text-align:left; 
                                                    font-family: Tahoma, Verdana, sans-serif; 
                                                    line-height:18px;
                                                "
                                                >
                                                    Hi 
                                                    <br/>
                                                    <br/>
                                                    Thanks to your contribution of $<%- body.amount %> to <%- body.recipient %>, the fundraising goal is one step closer!
                                                    <br/>
                                                    <br/>
                                                    Here is your transaction information:
                                                    <br/>
                                                    <br/>
                                                    <strong>
                                                        Transaction information
                                                    </strong>
                                                    <br/>
                                                    Transaction number: 
                                                    <br/>
                                                    Recipient: 
                                                    <br/>
                                                    Amount: 
                                                    <br/>
                                                    Type: 
                                                    <br/>
                                                    Date: 
                                                    <br/>
                                                    Payment method: 
                                                    <br/>
                                                    <br/>
                                                    <strong>
                                                        Billing information
                                                    </strong>
                                                    <br/>
                                                    Full name: 
                                                    <br/>
                                                    Email address: 
                                                    <br/>
                                                    Postal code: 
                                                    <br/>
                                                    Country: 
                                                    <br/>
                                                    <br/>
                                                    Thank you for your generosity!
                                                    <br/>
                                                    <br/>
                                                    Sincerely,
                                                    <br/>
                                                    <br/>
                                                    Lorem
                                                    <br>
                                                    <br>
                                                </div>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td 
                    style="
                        background: url(url), #EB3052; 
                        background-repeat-x: repeat; 
                        background-position-x: center; 
                        height: 8px;
                    "
                    >   
                    </td>
                </tr>
                <tr 
                style="
                    background-color:#EB3052; 
                    text-align: left;
                "
                >
                    <td 
                    style="
                        padding-top:14px; 
                        padding-bottom:14px; 
                        padding-left: 32px; 
                        padding-right: 32px; 
                        color:#fff; 
                        font-size: 12px;
                    "
                    >
                        <strong>
                            Lorem ipsum dolor sit amet.
                        </strong>
                        <br/>
                        <strong>
                            Lorem ipsum dolor sit amet.
                        </strong>
                    </td>
                </tr>
                <tr>
                    <td 
                    style="
                        text-align:center; 
                        height:24px; 
                        font-size: 13px; 
                        color:#B1B1B1; 
                        padding-top:14px; 
                        padding-bottom:14px; 
                        padding-left: 32px; 
                        padding-right: 32px;
                    "
                    >
                        Lorem ipsum dolor sit amet.
                        <span 
                        style="
                            color:#FFFFFF;
                        "
                        >
                            Lorem ipsum dolor sit amet.
                        </span>
                         Lorem ipsum dolor sit amet.
                        <br/>
                        <br/>
                        <a 
                        href="url" 
                        style="
                            color: #B1B1B1;
                        "
                        >
                            Lorem ipsum dolor sit amet.
                        </a>
                         | 
                        <a 
                        href="url" 
                        style="
                            color: #B1B1B1;
                        "
                        >
                            Lorem ipsum dolor sit amet.
                        </a>
                         | 
                        <a 
                        href="url" 
                        style="
                            color: #B1B1B1;
                        ">
                            Lorem ipsum dolor sit amet.
                        </a>
                        <br/>
                        <br/>
                        <a 
                        href="url"
                        >
                            <img 
                            src="url" 
                            border="0" 
                            alt="url" 
                            style="
                                max-height: 64px
                            "
                            />
                        </a>
                    </td>
                </tr>
            </table>
        </div>
    </body>
</html>
Hi <%- body.firstName %>!<br/><br/>
Thanks to your contribution of $<%- body.amount %> to <%- body.recipient %>, the fundraising goal is one step closer!<br/><br/>
Here is your transaction information:<br/><br/>
<strong>Transaction information</strong><br/>
Transaction number: <%- body.transactionNumber %><br/>
Recipient: <%- body.recipient %><br/>
Amount: $<%- body.amount %> <%- body.currency %><br/>
Type: <%- body.type %><br/>
Date: <%- body.date %><br/>
Payment method: <%- body.payment %><br/><br/>
<strong>Billing information</strong><br/>
<% if (body.organizationName) { %>
Company name: <%- body.organizationName %><br/>
<% } %>
Full name: <%- body.firstName %> <%- body.lastName %><br/>
Email address: <%- body.email %><br/>
Postal code: <%- body.postalCode %><br/>
Country: <%- body.country %><br/><br/>
Thank you for your generosity!<br/><br/>
Sincerely,<br/><br/>
<%- sender.name %>

电子邮件已正确正确且完整显示,但是电子邮件末尾显示一条通知,指出该邮件已被截断(但不是)。

在这种情况下,通知不应出现。

当电子邮件已经正确完整显示时,如何防止Gmail在电子邮件末尾显示通知?

1 个答案:

答案 0 :(得分:2)

就我而言,问题是由电子邮件中的一个非ASCII字符(特别是ä)引起的-将其添加到gmail邮件剪辑的任何部分中。

我确定我正在使用utf-8编码电子邮件,也许sendgrid稍后会以某种方式对其进行重新编码。