如何使用 Flutter Mailer 包发送复杂的电子邮件
Posted
技术标签:
【中文标题】如何使用 Flutter Mailer 包发送复杂的电子邮件【英文标题】：How to Send A Complicated Email with Flutter Mailer Package 【发布时间】：2019-03-11 08:22:36 【问题描述】：我可以使用 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" 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" 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 ><tr><td 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 class="es-m-p0r es-m-p20b" valign="top" align="center" style="padding:0;Margin:0;">
<table 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 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 ></td><td 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 align="left" style="padding:0;Margin:0;">
<table 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 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" 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" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;">
<tr style="border-collapse:collapse;">
<td align="center" valign="top" style="padding:0;Margin:0;">
<table 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 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 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 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 ><tr><td 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 class="es-m-p20b" align="left" style="padding:0;Margin:0;">
<table 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 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 ></td><td 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 align="left" style="padding:0;Margin:0;">
<table cellpadding="0" cellspacing="0" 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" 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" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;">
<tr style="border-collapse:collapse;">
<td align="center" valign="top" style="padding:0;Margin:0;">
<table 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 align="center" style="padding:20px;Margin:0;">
<table border="0" 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" 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" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;">
<tr style="border-collapse:collapse;">
<td align="center" valign="top" style="padding:0;Margin:0;">
<table 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 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" 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>这会导致：
【问题讨论】：
“我怎样才能将此 HTML 代码作为新 Message() 方法的 ..html 参数的字符串传递？” -> 我不太明白你的意思。你是在问如何在 Dart 中读取文件？ Message() 函数的 "..html" 参数将字符串作为输入。所以我在问如何将 HTML 文件转换为字符串并将其传递给“..html”。 您首先需要使用 Dart 内置实用程序打开文件并将其读入字符串。查看详情：api.dartlang.org/stable/2.0.0/dart-io/File-class.html 【参考方案1】：这个问题有两个方面。
如何设置 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。
【讨论】：
嗨，请问，如果您在 htmltemplate 中有多个需要更改的项目，例如地址、联系电话，除了名称，我尝试了 3 htmltemplate.replacleAll，带有名称，列出了电话和地址，但是当我发送电子邮件时，只保存了最后一个 htmltemplate.replaceall ，它只是地址，你能帮帮我吗？ 您将根据之前的replaceAll 调用的结果调用replaceAll：dart message.html = yourHtmlTemplate.replaceAll('NAME', name).replaceAll('ADDRESS', address); 以上是关于如何使用 Flutter Mailer 包发送复杂的电子邮件的主要内容，如果未能解决你的问题，请参考以下文章
Django - 使用 django-mailer 发送批量邮件
我被难住了：如何使用 PHP Mailer 发送 HTML 表单
如何将复杂（嵌套）对象解析为 JSON 并在 Flutter 中使用 HTTP 将其发送到服务器？
通过 Microsoft 365 SMTP 发送电子邮件时如何使用自定义显示名称？ （以 PHP Swift Mailer 为例）