如何将内联 CSS 样式添加到 Gmail 电子邮件 (SES sendRawEmail)？答案

【问题标题】：How Do I Add Inline CSS Styles To Gmail Email (SES sendRawEmail)?如何将内联 CSS 样式添加到 Gmail 电子邮件 (SES sendRawEmail)？
【发布时间】：2020-03-20 02:53:18
【问题描述】：

我正在使用 amazon SES 通过 node.js aws-sdk 库发送 HTML 电子邮件。这是我用来发送它的 js 脚本：

export const main: APIGatewayProxyHandler = async (event, _context) => {

  const success = await sendEmail()

  return {
    statusCode: 200,
    body: JSON.stringify({
      message: 'Done!',
      input: event,
    }, null, 2),
  };

}

const sendEmail = async () => {

  const fileName = "2019-W-4.pdf";
  var rawMailBody = "From: jim@bubbleflumps.com\n";
  rawMailBody = rawMailBody + "To: jim@bubbleflumps.com\n";
  rawMailBody = rawMailBody + "Subject: Test Subject Dueces 3\n";
  rawMailBody = rawMailBody + ``
  rawMailBody = rawMailBody + "MIME-Version: 1.0\n";
  rawMailBody = rawMailBody + "Content-Type: multipart/mixed; boundary=\"NextPart\"\n\n";
  rawMailBody = rawMailBody + "--NextPart\n";

  rawMailBody = rawMailBody + "Content-Type: text/html;\n";
  rawMailBody = rawMailBody + "Content-Transfer-Encoding: quoted-printable\n";
  rawMailBody = rawMailBody + "\n";

  const emailData = await getEmailData();

  rawMailBody = rawMailBody + emailData;

  console.log('final body', rawMailBody)

  const params = {
    RawMessage: {
      Data: rawMailBody
    },
    Destinations: [],
    Source: 'jim@bubbleflumps.com'
  };

  ses.sendRawEmail(params, function (err, data) {
    if (err) console.log("Error: " + err);
    else {

      console.log("Success call: ", JSON.stringify(data));
      return data
    }

  });

}

const getEmailData = () => {

  return new Promise( (resolve, reject) => {

    var output = '\n';

    var readerStream = readline.createInterface({
      input: require('fs').createReadStream('./simple.html')
    });

    readerStream.on('line', function (line) {
      const newLine = line;
      output = output + newLine;
      console.log('reading...', line)
    });

    readerStream.on('close', () => {
      console.log('closing...' , output)
      output = output + "\n";
      resolve(output);
    });

  })

}

这是我正在阅读并插入到电子邮件中的“simple.html”文件：

<html>

<body>
    <table style="background-color: #737373; color: orange;">
        <tr>
            <td style="background-color: #737373; color: orange;">

                <span style="background-color: #737373; color: orange">

                    Hello!
                    Hello2!
                </span>
                </th>
                <h2>More cool Stuff!</h1>
                    <pre>some pre text...!</pre>
                    <p>Please see the attached file for a list of customers to contact.</p>
                    <h1>Yaaaaa!</h1>
            </td>
        </tr>
    </table>
</body>

</html>

如您所见，我正在尝试设置文本“Hello”和“Hello2！”的样式。灰色背景和橙色。但是，这是我在 gmail 中看到的：

它以 HTML 形式出现，但出于某种原因，我无法获得任何要应用的样式。看了其他帖子后，每个人都说使用内联样式应该可以，但我正在使用内联样式...

谁能帮忙指出我在这里做错了什么？

谢谢！

【问题讨论】：

标签： css email html-email mime-types amazon-ses

【解决方案1】：

您的代码存在一些问题：

在background-color 和color 的跨度之后，您有一个流氓th
您有一个 h2 打开和一个 h1 关闭。

修复这些将得到以下代码。

<html>

<body>
    <table style="background-color: #737373; color: orange;">
        <tr>
            <td style="background-color: #737373; color: orange;">

                <span style="background-color: #737373; color: orange">

                    Hello!
                    Hello2!
                </span>
               
                <h2>More cool Stuff!</h2>
                    <pre>some pre text...!</pre>
                    <p>Please see the attached file for a list of customers to contact.</p>
                    <h1>Yaaaaa!</h1>
            </td>
        </tr>
    </table>
</body>

</html>

【讨论】：

谢谢，但即使有了这个修复，电子邮件仍然完全没有样式......
刚刚从我的答案中测试了代码，这就是它的外观：i.stack.imgur.com/r2u2V.png
有趣...对我来说它仍然看起来像纯文本。也许我需要在 gmail 中翻转一些设置？
如果您收到纯文本，请检查发送电子邮件的代码。 MIME 类型可能会导致问题。还要检查 Gmail 上的 show original 以查看 Gmail 接收的所有内容。

【解决方案2】：

除了@Syfer 对正确 html 的回答进行更正外，我只是删除了将 Content-Transfer-Encoding: quoted-printable\n 添加到 rawMailBody 的行，它起作用了！

【讨论】：