如何向Gmail电子邮件（SES sendRawEmail）添加内联CSS样式？

问题描述 投票：0回答：2

我正在使用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: [email protected]\n";
  rawMailBody = rawMailBody + "To: [email protected]\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: '[email protected]'
  };

  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中看到的内容：

enter image description here

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

任何人都可以指出我在做什么错吗？

谢谢！

css email html-email mime-types amazon-ses
2个回答
1
投票

您的代码有一些问题：

  1. th和background-color的跨度后有一个流氓color
  2. 您有一个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>
0
投票

伴随着@Syfer对正确html的答案所作的更正，我只是删除了将Content-Transfer-Encoding: quoted-printable\n添加到rawMailBody的那行，它行得通！

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.