html - 如何使用 Flutter Mailer Package 发送复杂的邮件

标签 html email dart flutter mailer

我可以使用 Mailer 包 ( https://pub.dartlang.org/packages/mailer ) 发送简单的 HTML 电子邮件。在他们的例子中，"<h1>Test</h1>\n<p>Hey! Here's some HTML content</p>"用作简单的 HTML 文本:

final message = new Message()
..from = new Address(username, 'Your name')
..recipients.add('destination@example.com')
..ccRecipients.addAll(['destCc1@example.com', 'destCc2@example.com'])
..bccRecipients.add(new Address('bccAddress@example.com'))
..subject = 'Test Dart Mailer library :: 😀 :: ${new DateTime.now()}'
..text = 'This is the plain text.\nThis is line 2 of the text part.'
..html = "<h1>Test</h1>\n<p>Hey! Here's some HTML content</p>";

但是如果我想创建一个复杂的 HTML 电子邮件怎么办？例如 stripo.email 提供带有 HTML 代码的模板。如何将此 HTML 代码作为 ..html 的字符串传递new Message() 的参数方法？

这是 stripo.email 网站为其模板创建的 HTML 代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html style="width:100%;font-family:arial, 'helvetica neue', helvetica, sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;padding:0;Margin:0;">

<head>
  <meta charset="UTF-8">
  <meta content="width=device-width, initial-scale=1" name="viewport">
  <meta name="x-apple-disable-message-reformatting">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta content="telephone=no" name="format-detection">
  <title>New email</title>
  <!--[if (mso 16)]>
    <style type="text/css">
    a {text-decoration: none;}
    </style>
    <![endif]-->
  <!--[if gte mso 9]><style>sup { font-size: 100% !important; }</style><![endif]-->
  <style type="text/css">
    @media only screen and (max-width:600px) {
      p,
      ul li,
      ol li,
      a {
        font-size: 16px!important
      }
      h1 {
        font-size: 30px!important;
        text-align: center
      }
      h2 {
        font-size: 26px!important;
        text-align: center
      }
      h3 {
        font-size: 20px!important;
        text-align: center
      }
      h1 a {
        font-size: 30px!important
      }
      h2 a {
        font-size: 26px!important
      }
      h3 a {
        font-size: 20px!important
      }
      .es-menu td a {
        font-size: 16px!important
      }
      .es-header-body p,
      .es-header-body ul li,
      .es-header-body ol li,
      .es-header-body a {
        font-size: 16px!important
      }
      .es-footer-body p,
      .es-footer-body ul li,
      .es-footer-body ol li,
      .es-footer-body a {
        font-size: 16px!important
      }
      .es-infoblock p,
      .es-infoblock ul li,
      .es-infoblock ol li,
      .es-infoblock a {
        font-size: 12px!important
      }
      *[class="gmail-fix"] {
        display: none!important
      }
      .es-m-txt-c,
      .es-m-txt-c h1,
      .es-m-txt-c h2,
      .es-m-txt-c h3 {
        text-align: center!important
      }
      .es-m-txt-r,
      .es-m-txt-r h1,
      .es-m-txt-r h2,
      .es-m-txt-r h3 {
        text-align: right!important
      }
      .es-m-txt-l,
      .es-m-txt-l h1,
      .es-m-txt-l h2,
      .es-m-txt-l h3 {
        text-align: left!important
      }
      .es-m-txt-r img,
      .es-m-txt-c img,
      .es-m-txt-l img {
        display: inline!important
      }
      .es-button-border {
        display: block!important
      }
      .es-button {
        font-size: 20px!important;
        display: block!important;
        border-width: 10px 0px 10px 0px!important
      }
      .es-btn-fw {
        border-width: 10px 0px!important;
        text-align: center!important
      }
      .es-adaptive table,
      .es-btn-fw,
      .es-btn-fw-brdr,
      .es-left,
      .es-right {
        width: 100%!important
      }
      .es-content table,
      .es-header table,
      .es-footer table,
      .es-content,
      .es-footer,
      .es-header {
        width: 100%!important;
        max-width: 600px!important
      }
      .es-adapt-td {
        display: block!important;
        width: 100%!important
      }
      .adapt-img {
        width: 100%!important;
        height: auto!important
      }
      .es-m-p0 {
        padding: 0px!important
      }
      .es-m-p0r {
        padding-right: 0px!important
      }
      .es-m-p0l {
        padding-left: 0px!important
      }
      .es-m-p0t {
        padding-top: 0px!important
      }
      .es-m-p0b {
        padding-bottom: 0!important
      }
      .es-m-p20b {
        padding-bottom: 20px!important
      }
      .es-mobile-hidden,
      .es-hidden {
        display: none!important
      }
      .es-desk-hidden {
        display: table-row!important;
        width: auto!important;
        overflow: visible!important;
        float: none!important;
        max-height: inherit!important;
        line-height: inherit!important
      }
      .es-desk-menu-hidden {
        display: table-cell!important
      }
      table.es-table-not-adapt,
      .esd-block-html table {
        width: auto!important
      }
      table.es-social {
        display: inline-block!important
      }
      table.es-social td {
        display: inline-block!important
      }
    }
    
    #outlook a {
      padding: 0;
    }
    
    .ExternalClass {
      width: 100%;
    }
    
    .ExternalClass,
    .ExternalClass p,
    .ExternalClass span,
    .ExternalClass font,
    .ExternalClass td,
    .ExternalClass div {
      line-height: 100%;
    }
    
    .es-button {
      mso-style-priority: 100!important;
      text-decoration: none!important;
    }
    
    a[x-apple-data-detectors] {
      color: inherit!important;
      text-decoration: none!important;
      font-size: inherit!important;
      font-family: inherit!important;
      font-weight: inherit!important;
      line-height: inherit!important;
    }
    
    .es-desk-hidden {
      display: none;
      float: left;
      overflow: hidden;
      width: 0;
      max-height: 0;
      line-height: 0;
      mso-hide: all;
    }
  </style>
</head>

<body style="width:100%;font-family:arial, 'helvetica neue', helvetica, sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;padding:0;Margin:0;">
  <div class="es-wrapper-color" style="background-color:#F6F6F6;">
    <!--[if gte mso 9]>
			<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
				<v:fill type="tile" color="#f6f6f6"></v:fill>
			</v:background>
		<![endif]-->
    <table cellpadding="0" cellspacing="0" class="es-wrapper" width="100%" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;padding:0;Margin:0;width:100%;height:100%;background-repeat:repeat;background-position:center top;">
      <tr style="border-collapse:collapse;">
        <td valign="top" style="padding:0;Margin:0;">
          <table cellpadding="0" cellspacing="0" class="es-content" align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;table-layout:fixed !important;width:100%;">
            <tr style="border-collapse:collapse;">
              <td align="center" style="padding:0;Margin:0;">
                <table class="es-content-body" align="center" cellpadding="0" cellspacing="0" width="600" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;background-color:transparent;">
                  <tr style="border-collapse:collapse;">
                    <td align="left" style="padding:20px;Margin:0;">
                      <!--[if mso]><table width="560"><tr><td width="356" valign="top"><![endif]-->
                      <table cellpadding="0" cellspacing="0" class="es-left" align="left" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;float:left;">
                        <tr style="border-collapse:collapse;">
                          <td width="356" class="es-m-p0r es-m-p20b" valign="top" align="center" style="padding:0;Margin:0;">
                            <table cellpadding="0" cellspacing="0" width="100%" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;">
                              <tr style="border-collapse:collapse;">
                                <td align="left" class="es-infoblock es-m-txt-c" style="padding:0;Margin:0;line-height:120%;font-size:12px;color:#CCCCCC;">
                                  <p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:12px;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:120%;color:#CCCCCC;">Use this area to offer a short preview of your email's content.</p>
                                </td>
                              </tr>
                            </table>
                          </td>
                        </tr>
                      </table>
                      <!--[if mso]></td><td width="20"></td><td width="184" valign="top"><![endif]-->
                      <table cellpadding="0" cellspacing="0" align="right" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;">
                        <tr style="border-collapse:collapse;">
                          <td width="184" align="left" style="padding:0;Margin:0;">
                            <table cellpadding="0" cellspacing="0" width="100%" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;">
                              <tr style="border-collapse:collapse;">
                                <td align="right" class="es-infoblock es-m-txt-c" style="padding:0;Margin:0;line-height:120%;font-size:12px;color:#CCCCCC;">
                                  <p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:12px;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:120%;color:#CCCCCC;"><a target="_blank" href="http://stripo.email" style="-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:arial, 'helvetica neue', helvetica, sans-serif;font-size:12px;text-decoration:underline;color:#2CB543;">View email in your browser</a></p>
                                </td>
                              </tr>
                            </table>
                          </td>
                        </tr>
                      </table>
                      <!--[if mso]></td></tr></table><![endif]-->
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
          <table cellpadding="0" cellspacing="0" class="es-content" align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;table-layout:fixed !important;width:100%;">
            <tr style="border-collapse:collapse;">
              <td align="center" style="padding:0;Margin:0;">
                <table class="es-content-body" align="center" cellpadding="0" cellspacing="0" width="600" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;background-color:#FFFFFF;">
                  <tr style="border-collapse:collapse;">
                    <td align="left" style="padding:20px;Margin:0;">
                      <table cellpadding="0" cellspacing="0" width="100%" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;">
                        <tr style="border-collapse:collapse;">
                          <td width="560" align="center" valign="top" style="padding:0;Margin:0;">
                            <table cellpadding="0" cellspacing="0" width="100%" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;">
                              <tr style="border-collapse:collapse;">
                                <td align="left" style="padding:0;Margin:0;padding-bottom:15px;">
                                  <h2 style="Margin:0;line-height:120%;mso-line-height-rule:exactly;font-family:arial, 'helvetica neue', helvetica, sans-serif;font-size:24px;font-style:normal;font-weight:normal;color:#333333;">Welcome to the Stripo 2&nbsp;Columns Template!</h2>
                                </td>
                              </tr>
                              <tr style="border-collapse:collapse;">
                              </tr>
                              <tr style="border-collapse:collapse;">
                                <td align="left" style="padding:0;Margin:0;padding-top:20px;">
                                  <p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:14px;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:150%;color:#333333;">Now it’s the time to insert your own content into it by dragging blocks and structures from the side&nbsp;panel to this template area.</p>
                                </td>
                              </tr>
                            </table>
                          </td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                  <tr style="border-collapse:collapse;">
                    <td align="left" style="Margin:0;padding-top:20px;padding-bottom:20px;padding-left:20px;padding-right:20px;">
                      <!--[if mso]><table width="560"><tr><td width="270" valign="top"><![endif]-->
                      <table cellpadding="0" cellspacing="0" class="es-left" align="left" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;float:left;">
                        <tr style="border-collapse:collapse;">
                          <td width="270" class="es-m-p20b" align="left" style="padding:0;Margin:0;">
                            <table cellpadding="0" cellspacing="0" width="100%" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;">
                              <tr style="border-collapse:collapse;">
                                <td align="left" style="padding:0;Margin:0;">
                                  <p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:14px;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:150%;color:#333333;">When your email is ready, you can save it or export using one of available methods: to your MailChimp account or as a pure HTML.</p>
                                </td>
                              </tr>
                              <tr style="border-collapse:collapse;">
                                <td align="left" style="padding:0;Margin:0;padding-top:20px;">
                                  <p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:14px;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:150%;color:#333333;">Currently, our team is working to create customized blocks for you so you could create your emails faster.</p>
                                </td>
                              </tr>
                            </table>
                          </td>
                        </tr>
                      </table>
                      <!--[if mso]></td><td width="20"></td><td width="270" valign="top"><![endif]-->
                      <table cellpadding="0" cellspacing="0" class="es-right" align="right" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;float:right;">
                        <tr style="border-collapse:collapse;">
                          <td width="270" align="left" style="padding:0;Margin:0;">
                            <table cellpadding="0" cellspacing="0" width="100%" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;">
                              <tr style="border-collapse:collapse;">
                              </tr>
                              <tr style="border-collapse:collapse;">
                                <td align="center" style="padding:0;Margin:0;padding-top:10px;">
                                  <h3 style="Margin:0;line-height:120%;mso-line-height-rule:exactly;font-family:arial, 'helvetica neue', helvetica, sans-serif;font-size:20px;font-style:normal;font-weight:normal;color:#333333;">Image Title Goes Here</h3>
                                </td>
                              </tr>
                              <tr style="border-collapse:collapse;">
                                <td align="left" style="padding:0;Margin:0;padding-top:5px;">
                                  <p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:14px;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:150%;color:#333333;">You can change the size, layout or link of the downloaded image in the left-hand side menu.</p>
                                </td>
                              </tr>
                            </table>
                          </td>
                        </tr>
                      </table>
                      <!--[if mso]></td></tr></table><![endif]-->
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
          <table cellpadding="0" cellspacing="0" class="es-footer" align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;table-layout:fixed !important;width:100%;background-color:transparent;background-repeat:repeat;background-position:center top;">
            <tr style="border-collapse:collapse;">
              <td align="center" style="padding:0;Margin:0;">
                <table class="es-footer-body" align="center" cellpadding="0" cellspacing="0" width="600" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;background-color:transparent;">
                  <tr style="border-collapse:collapse;">
                    <td align="left" style="padding:0;Margin:0;padding-top:20px;padding-left:20px;padding-right:20px;">
                      <table cellpadding="0" cellspacing="0" width="100%" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;">
                        <tr style="border-collapse:collapse;">
                          <td width="560" align="center" valign="top" style="padding:0;Margin:0;">
                            <table cellpadding="0" cellspacing="0" width="100%" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;">
                              <tr style="border-collapse:collapse;">
                                <td align="center" style="padding:20px;Margin:0;">
                                  <table border="0" width="75%" height="100%" cellpadding="0" cellspacing="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;">
                                    <tr style="border-collapse:collapse;">
                                      <td style="padding:0;Margin:0px 0px 0px 0px;border-bottom:1px solid #CCCCCC;background:none;height:1px;width:100%;margin:0px;"> </td>
                                    </tr>
                                  </table>
                                </td>
                              </tr>
                              <tr style="border-collapse:collapse;">
                                <td align="center" style="padding:0;Margin:0;padding-top:10px;padding-bottom:10px;">
                                  <p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:11px;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:150%;color:#333333;">Your footer info might be placed here</p>
                                </td>
                              </tr>
                              <tr style="border-collapse:collapse;">
                                <td align="center" style="padding:0;Margin:0;padding-top:10px;padding-bottom:10px;">
                                  <p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:11px;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:150%;color:#333333;">© 2018 Your Company name</p>
                                </td>
                              </tr>
                            </table>
                          </td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
          <table cellpadding="0" cellspacing="0" class="es-content" align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;table-layout:fixed !important;width:100%;">
            <tr style="border-collapse:collapse;">
              <td align="center" style="padding:0;Margin:0;">
                <table class="es-content-body" align="center" cellpadding="0" cellspacing="0" width="600" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;background-color:transparent;">
                  <tr style="border-collapse:collapse;">
                    <td align="left" style="padding:0;Margin:0;padding-left:20px;padding-right:20px;padding-bottom:30px;">
                      <table cellpadding="0" cellspacing="0" width="100%" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;">
                        <tr style="border-collapse:collapse;">
                          <td width="560" align="center" valign="top" style="padding:0;Margin:0;">
                            <table cellpadding="0" cellspacing="0" width="100%" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;">
                              <tr style="border-collapse:collapse;">
                                <td class="es-infoblock" align="center" style="padding:0;Margin:0;line-height:120%;font-size:12px;color:#CCCCCC;">
                                  <a target="_blank" href="http://stripo.email/?utm_source=templates&utm_medium=email&utm_campaign=basic&utm_content=two_columns" style="-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:arial, 'helvetica neue', helvetica, sans-serif;font-size:12px;text-decoration:underline;color:#2CB543;">
                                  <img src="https://ibwhc.stripocdn.email/content/guids/CABINET_9df86e5b6c53dd0319931e2447ed854b/images/64951510234941531.png" alt="" width="125" style="display:block;border:0;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic;">                                    </a>
                                </td>
                              </tr>
                            </table>
                          </td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </div>
</body>

</html>

结果为: enter image description here

最佳答案

这个问题有两个方面。

  • 如何设置 stripo html。
  • 如何调整 html 模板。 (修改内容以更改模板的部分内容)

要设置模板，只需执行以下操作:

message.html =
'''<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
[... copy the complete template here ...]
</html>'''

三引号 (''') 而不是单引号 (') 允许文本跨越多行。 为了保持代码整洁，您可能需要创建一个新的 dart 文件:mail-template.dart 并将 html-template 分配给一个变量。然后包含此文件并分配变量。

要替换部分模板，我会在模板上使用 .replaceAll。

var nameFromSomeInput = 'Jane Doe';
var yourHtmlTemplate = '<html>Dear {{NAME}}</html>';
message.html = yourHtmlTemplate.replaceAll('{{NAME}}', nameFromSomeInput);

请注意，replaceAll 很简单，不依赖于任何额外的库。然而它很慢。特别是如果您通过多次调用 replaceAll 来替换多个值。

考虑这样一个模板引擎:jinja在这种情况下。

关于html - 如何使用 Flutter Mailer Package 发送复杂的邮件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52672186/

上一篇：listview - 列中展开的 ListView 占用额外空间

下一篇：android - Scaffold 主体中的有状态小部件

相关文章：

html - 当字体粗细改变时保持原来的内边距

php - 制作条件语句以发送电子邮件警报

python - 如何在Python中对事件监听器和函数应用多处理？

Dart 聚合物自定义元素动态链接

html - 类别菜单列对齐 css

javascript - Appendchild 仅适用于最后一个元素

css - 如何创建可直接在页面上编辑的文本字段？

javascript - 尝试将 EmailJS 与 React 一起使用时服务 ID 无效

dart - Column 中的 Flutter 定位小部件

android-studio - 数据更新后 flutter ListView 未更新

©2024 IT工具网  联系我们