【问题标题】:css not working in email sending using AWScss 在使用 AWS 发送电子邮件时不起作用
【发布时间】:2018-11-28 05:00:19
【问题描述】:

我正在用 php 开发一个网站,并希望在用户注册时向用户发送电子邮件。

我能够成功地做到这一点。 即使我使用 html 格式,它也以 html 格式发送。

我试过这个。我知道图片应该上传到服务器,但我会稍后再做。

$bodyPart = '
<body style="background-color:#FFFFFF;">

<img id="header" style="position:absolute; left:85px; top:50px; " src="images/logo.jpg" width="140" height="90" border="0" alt="" /></a>


<img id="cloths" style="position:absolute; left:275px; top:25px;" src="images/cloths.jpg" width="350" height="300" border="0" alt="" /></a>

<font size="7" style="font-family:Times new Roman; position:absolute; left:50px; top:120px;">Thank YOU</font>

<font size="3" style="font-family:Times new Roman;position:absolute;left:50px; top:165px;">For registering with our team </font>

<img id="bag" style ="position:absolute; left:290px; top:345px;"src="images/bag1.jpg" width="250" height="240" border="0" alt="" /></a>

<img style="position:absolute; left:30px; top:440px; "id="watch" src="images/watch1.jpg" width="260" height="180" border="0" alt="" /></a>

</body>

';

  $m->setMessageFromString($plainTextBody,$bodyPart);

  print_r($ses->sendEmail($m));

我应该得到这个输出

但我得到了这个。

但问题是格式化没有正确完成,即使它在我的本地主机中作为独立文件工作。我尝试使用外部 CSS、内部 CSS 和内联 CSS。但它不起作用。

任何使用 html 发送电子邮件的 CSS 示例都会非常有帮助。

提前致谢。

【问题讨论】:

  • 查看更新的问题。
  • 我们不知道 setMessageFromString() 和 sendEmail() 在做什么......
  • setMessageFromString 用于设置邮件正文部分,其中 sendEmail 用于在设置完 message、sendTo、from 和主题部分后发送邮件。
  • 您的 css 正在运行,如果您希望您的图片使用图片 src 中的完整图片路径。
  • 我知道我需要指定图像的完整路径,正如我在问题中已经说过的那样。你怎么能说我的 CSS 工作正常?

标签: php email amazon-web-services html-email


【解决方案1】:

更新 正如我所假设的,您刚刚完成了复制粘贴。请尝试以下代码。学习 HTML 基本语法。

别忘了点赞并标记为已回答;)

$bodyPart = ' 

<BODY 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
</head> 

<body style="margin-top:20px;"> 
<table width="600" cellpadding="0" cellspacing="0" align="center"> 


<tr> 
  <td> 
    <img id="header" src="images/logo.jpg" width="140" height="90" border="0" alt="" /></a> 
  </td>
  <td>
    <img id="cloths" src="images/cloths.jpg" width="350" height="300" border="0" alt="" /></a> 
  </td>
</tr>

<tr>
  <td>
    <font size="7" style="font-family:Times new Roman;">Thank YOU</font> 
  </td>
  <td>
    <font size="3" style="font-family:Times new Roman;">For registering with our team </font> 
  </td>
</tr>
<tr>
  <td>
    <img id="bag" src="images/bag1.jpg" width="250" height="240" border="0" alt="" /></a> 
  </td>
  <td>
    <img id="watch" src="images/watch1.jpg" width="260" height="180" border="0" alt="" /></a> 
  </td>
  </tr> 
</table>';

echo $bodyPart;

年龄较大 让它变得简单。在您的 html 正文中放置一张表格并固定宽度。

您的电子邮件正文应如下所示

$body = <<<BODY
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body leftmargin="0" rightmargin="0" topmargin="0" bottommargin="0" marginwidth="0" marginheight="0">
<table width="600" cellpadding="0" cellspacing="0" align="center">
<tr>
<td>=============Your content =========</td>
</tr>
</table>
BODY;

echo $body;

【讨论】:

  • 它改变了输出,但仍然没有得到正确的格式,因为它应该基于 CSS。
  • 请注意,任何电子邮件客户端都不会处理外部 css/js 。您必须仅设置 css inline。只需使用简单的表创建输出。它适用于所有人。您的内联 css 可能有问题
  • 我使用内联css,它作为独立文件工作,但不是在发送电子邮件时。
  • 从您的代码中删除绝对位置并尝试...我认为它的基本 html 对齐问题。
  • 我已经在我的问题中发布了正文代码。即使我试图删除绝对位置但仍然没有效果。 :(
【解决方案2】:

我在这里的示例是使用Boto3 library 代替Python 3,但我认为它仍然可以转化为PHP 问题,主要是因为问题的核心不是PHP 特定的,而是你内部的HTML HTML_BODY 字段为SES,这与语言无关,所以我在这里的示例应该有所帮助。

此代码成功发送到我的电子邮件地址,其格式与 the example on W3 Schools here 中的格式完全相同

HTML 示例:

<!DOCTYPE html>
<html>
<head>
<style>
table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
    text-align: left;
    padding: 8px;
}

tr:nth-child(even){background-color: #f2f2f2}
</style>
</head>
<body>

<h2>Responsive Table</h2>
<p>A responsive table will display a horizontal scroll bar if the screen is too 
small to display the full content. Resize the browser window to see the effect:</p>
<p>To create a responsive table, add a container element (like div) with <strong>overflow-x:auto</strong> around the table element:</p>

<div style="overflow-x:auto;">
  <table>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
    </tr>
    <tr>
      <td>Jill</td>
      <td>Smith</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
    </tr>
    <tr>
      <td>Eve</td>
      <td>Jackson</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
    </tr>
    <tr>
      <td>Adam</td>
      <td>Johnson</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
    </tr>
  </table>
</div>

</body>
</html>

使用上述 HTML 的 AWS SES 示例:

#Your Imports go here
import boto3

# Replace sender@example.com with your "From" address.
# This address must be verified with Amazon SES.
SENDER = "the_email_address_of_who_is_sending_this_email_out@gmail.com"

# Replace recipient@example.com with a "To" address. If your account
# is still in the sandbox, this address must be verified.
RECIPIENT = "the_email_address_of_who_will_be_receiving_this_email@gmail.com"

# Specify a configuration set. If you do not want to use a configuration
# set, comment the following variable, and the
# ConfigurationSetName=CONFIGURATION_SET argument below.
# CONFIGURATION_SET = "ConfigSet"

# If necessary, replace us-west-2 with the AWS Region you're using for Amazon SES.
AWS_REGION = "us-east-1"

# The subject line for the email.
SUBJECT = "ARL Data Lake"

# The email body for recipients with non-HTML email clients.
# BODY_TEXT = ("Amazon SES Test (Python)\r\n"
#             "This email was sent with Amazon SES using the "
#             "AWS SDK for Python (Boto)."
#             )
BODY_TEXT = str(records)

# The HTML body of the email.

BODY_HTML = """<!DOCTYPE html>
    <html>
    <head>
    <style>
    table {
        border-collapse: collapse;
        width: 100%;
    }

    th, td {
        text-align: left;
        padding: 8px;
    }

    tr:nth-child(even){background-color: #f2f2f2}
    </style>
    </head>
    <body>

    <h2>Responsive Table</h2>
    <p>A responsive table will display a horizontal scroll bar if the screen is too 
    small to display the full content. Resize the browser window to see the effect:</p>
    <p>To create a responsive table, add a container element (like div) with <strong>overflow-x:auto</strong> around the table element:</p>

    <div style="overflow-x:auto;">
      <table>
        <tr>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Points</th>
          <th>Points</th>
          <th>Points</th>
          <th>Points</th>
          <th>Points</th>
          <th>Points</th>
          <th>Points</th>
          <th>Points</th>
          <th>Points</th>
          <th>Points</th>
        </tr>
        <tr>
          <td>Jill</td>
          <td>Smith</td>
          <td>50</td>
          <td>50</td>
          <td>50</td>
          <td>50</td>
          <td>50</td>
          <td>50</td>
          <td>50</td>
          <td>50</td>
          <td>50</td>
          <td>50</td>
        </tr>
        <tr>
          <td>Eve</td>
          <td>Jackson</td>
          <td>94</td>
          <td>94</td>
          <td>94</td>
          <td>94</td>
          <td>94</td>
          <td>94</td>
          <td>94</td>
          <td>94</td>
          <td>94</td>
          <td>94</td>
        </tr>
        <tr>
          <td>Adam</td>
          <td>Johnson</td>
          <td>67</td>
          <td>67</td>
          <td>67</td>
          <td>67</td>
          <td>67</td>
          <td>67</td>
          <td>67</td>
          <td>67</td>
          <td>67</td>
          <td>67</td>
        </tr>
      </table>
    </div>

    </body>
    </html>"""

# The character encoding for the email.
CHARSET = "UTF-8"

# Create a new SES resource and specify a region.
client = boto3.client('ses', region_name=AWS_REGION)

# Try to send the email.
try:
    # Provide the contents of the email.
    response = client.send_email(
        Destination={
            'ToAddresses': [
                RECIPIENT,
            ],
        },
        Message={
            'Body': {
                'Html': {
                    'Charset': CHARSET,
                    'Data': BODY_HTML,
                },
                'Text': {
                    'Charset': CHARSET,
                    'Data': BODY_TEXT,
                },
            },
            'Subject': {
                'Charset': CHARSET,
                'Data': SUBJECT,
            },
        },
        Source=SENDER,
        # If you are not using a configuration set, comment or delete the
        # following line
        # ConfigurationSetName=CONFIGURATION_SET,
    )
# Display an error if something goes wrong.
except Exception as e:
    print(e.response['Error']['Message'])
else:
    print("Email sent! Message ID:"),
    print(response['MessageId'])

电子邮件结果:

来源和更多帮助/示例:

注意:

为了轻松运行此示例,我建议设置一个快速的Cloud9 IDE in AWS,在其上安装 Python 3,将我的代码复制并粘贴到其中,然后单击运行。如果您的Cloud9 具有使用 SES 的适当角色和权限,那么它应该可以工作。另请注意,Cloud9 只是在 EC2 实例之上运行,因此您可以通过 SSH 连接到它(直接从浏览器上的管理控制台,这很好)并运行类似“sudo yum install python-3.6”的内容并手动运行使用“sudo touch code_example.py”,“sudo chmod 755 code_example.py”,“sudo vi code_example.py”的代码,然后点击代表插入的“i”键,然后右键单击并粘贴我的SSH客户端将我复制到剪贴板上的代码复制到 SSH 的 VI 文本编辑器中,然后单击“ESC”退出插入模式,然后单击“:wq”并单击代表“写入”的 Enter,然后单击“退出”,然后运行它做“python3 code_example.py”。如果您成功安装了 Python,它应该可以工作。但就像我说的那样,使用 Cloud9 会更容易,打开 Cloud9 的 IDE,创建一个新的 Python 文件,将代码粘贴进去,然后以 Python 3 的形式运行,有一个按钮可以像任何普通 IDE 一样执行此操作。

【讨论】:

    【解决方案3】:
    <?php 
    
    $to = 'rajeevranjan@hostname.com'; 
    
    $subject = 'Test email '; 
    $headers  = 'MIME-Version: 1.0' . "\r\n";
    $headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
    $headers .= "From: rajeev ranjan"; 
    $message='<div style="background-color:#FFFFFF;">
    
    <img id="header" style="position:absolute; left:85px; top:50px; " src="images/logo.jpg" width="140" height="90" border="0" alt="" /></a>
    
    
    <img id="cloths" style="position:absolute; left:275px; top:25px;" src="images/cloths.jpg" width="350" height="300" border="0" alt="" /></a>
    
    <font size="7" style="font-family:Times new Roman; position:absolute; left:50px; top:120px;">Thank YOU</font>
    
    <font size="3" style="font-family:Times new Roman;position:absolute;left:50px; top:165px;">For registering with our team </font>
    
    <img id="bag" style ="position:absolute; left:290px; top:345px;"src="images/bag1.jpg" width="250" height="240" border="0" alt="" /></a>
    
    <img style="position:absolute; left:30px; top:440px; "id="watch" src="images/watch1.jpg" width="260" height="180" border="0" alt="" /></a>
    
    </div>
    
    ';
    //send the email 
    $mail_sent = @mail( $to, $subject, $message, $headers ); 
    //if the message is sent successfully print "Mail sent". Otherwise print "Mail failed" 
    echo $mail_sent ? "Mail sent" : "Mail failed"; 
    ?>
    

    【讨论】:

    • 但我的主要问题是它不适用于亚马逊服务。我没有得到正确的输出。正如你在我的问题中看到的那样。知道为什么吗?
    • 我知道图片,我会尽快上传,但即使是 CSS 也不行。
    • 我尝试使用您的脚本,只是更改了 to 和 from。即使在这种情况下,我也没有得到正确的输出。你能把你收到的电子邮件截图贴出来吗?
    • 正确的输出与 css 有关,我不擅长编写 css。HTML 专家可以为您完成。
    • bt 你说你在电子邮件中得到了正确的输出
    【解决方案4】:

    发布您的代码..

    但我认为问题在于您的Content-Type

    检查一下:

    Content-type: text/html; charset=iso-8859-1\r\n
    

    text/html 是必须的.​​.

    更新:

    路径不正确。

    images/logo.jpg
    

    将图像上传到服务器(或 imagehoster)并插入整个链接。

    更新 2

    我想我有解决办法:

    setMessageFromString() 的第一个参数是纯文本。第二个参数需要html内容。如果您想发送 HTML - 电子邮件,请检查:

    $m->setMessageFromString($plainTextBody, $HTMLBody); 
    

    【讨论】:

    • 亚马逊提供的SES(simple email service)内置功能。
    • 我知道。但是,如果不应显示仅 prblm 图像,为什么它会更改格式。请再次查看我的问题以获取更多详细信息。
    • hmm.. 可能会添加&lt;html&gt;&lt;/html&gt; 标签。
    • 还是一样。 :( 感谢您的建议。如果您还有任何建议,请告诉我。:) 我会尽一切努力让它工作。
    • 你能解决格式问题吗@keen
    猜你喜欢
    • 2016-12-25
    • 2015-07-20
    • 2012-12-14
    • 2012-09-11
    • 2016-02-11
    • 2012-08-01
    • 2018-10-30
    • 2017-10-21
    • 1970-01-01
    相关资源
    最近更新 更多