Как добавить встроенные стили CSS в электронную почту Gmail (SES sendRawEmail)?

Я использую amazon SES для отправки электронных писем в формате HTML с помощью библиотеки node.js aws-sdk. Вот скрипт 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:

введите здесь описание изображения

Он появляется как HTML, но по какой-то причине я не могу применить какие-либо стили. После просмотра других сообщений все говорят, что использование встроенных стилей должно работать, но я использую встроенные стили...

Может ли кто-нибудь помочь указать, что я делаю неправильно здесь?

Спасибо!


person Jim    schedule 24.11.2019    source источник


Ответы (2)


У вас есть несколько проблем с вашим кодом:

  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>

person Syfer    schedule 25.11.2019
comment
Спасибо, но даже с этим исправлением письмо приходит совершенно без стиля... - person Jim; 25.11.2019
comment
Только что проверил код из моего ответа, и вот как он выглядит: i.stack.imgur.com/ r2u2V.png - person Syfer; 25.11.2019
comment
Интересно... для меня это все еще выглядит как обычный текст. Возможно, есть какие-то настройки, которые мне нужно перевернуть в gmail? - person Jim; 26.11.2019
comment
Если вы получаете обычный текст, проверьте код, который отправляет электронное письмо. Тип mime может вызывать проблемы. Также проверьте show original в Gmail, чтобы узнать, что получает Gmail. - person Syfer; 26.11.2019

Наряду с исправлением ответа @Syfer для правильного html я просто удалил строку, в которой a добавляет Content-Transfer-Encoding: quoted-printable\n к rawMailBody, и это сработало!

person Jim    schedule 02.12.2019