Hen*_*nry 5 html email mailer dart flutter
我可以使用 Mailer 包发送简单的 HTML 电子邮件（https://pub.dartlang.org/packages/mailer）。正如他们的示例所示，"<h1>Test</h1>\\n<p>Hey! Here\'s some HTML content</p>"它作为简单的 HTML 文本工作：
final message = new Message()\n..from = new Address(username, \'Your name\')\n..recipients.add(\'destination@example.com\')\n..ccRecipients.addAll([\'destCc1@example.com\', \'destCc2@example.com\'])\n..bccRecipients.add(new Address(\'bccAddress@example.com\'))\n..subject = \'Test Dart Mailer library :: :: ${new DateTime.now()}\'\n..text = \'This is the plain text.\\nThis is line 2 of the text part.\'\n..html = "<h1>Test</h1>\\n<p>Hey! Here\'s some HTML content</p>";\n但是如果我想创建一封复杂的 HTML 电子邮件怎么办？例如，stripo.email 提供带有 HTML 代码的模板。如何将此 HTML 代码作为..html该new Message()方法参数的字符串传递？
以下是 stripo.email 网站为其模板创建的 HTML 代码：
\n\n<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r\n<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;">\r\n\r\n<head>\r\n <meta charset="UTF-8">\r\n <meta content="width=device-width, initial-scale=1" name="viewport">\r\n <meta name="x-apple-disable-message-reformatting">\r\n <meta http-equiv="X-UA-Compatible" content="IE=edge">\r\n <meta content="telephone=no" name="format-detection">\r\n <title>New email</title>\r\n <!--[if (mso 16)]>\r\n <style type="text/css">\r\n a {text-decoration: none;}\r\n </style>\r\n <![endif]-->\r\n <!--[if gte mso 9]><style>sup { font-size: 100% !important; }</style><![endif]-->\r\n <style type="text/css">\r\n @media only screen and (max-width:600px) {\r\n p,\r\n ul li,\r\n ol li,\r\n a {\r\n font-size: 16px!important\r\n }\r\n h1 {\r\n font-size: 30px!important;\r\n text-align: center\r\n }\r\n h2 {\r\n font-size: 26px!important;\r\n text-align: center\r\n }\r\n h3 {\r\n font-size: 20px!important;\r\n text-align: center\r\n }\r\n h1 a {\r\n font-size: 30px!important\r\n }\r\n h2 a {\r\n font-size: 26px!important\r\n }\r\n h3 a {\r\n font-size: 20px!important\r\n }\r\n .es-menu td a {\r\n font-size: 16px!important\r\n }\r\n .es-header-body p,\r\n .es-header-body ul li,\r\n .es-header-body ol li,\r\n .es-header-body a {\r\n font-size: 16px!important\r\n }\r\n .es-footer-body p,\r\n .es-footer-body ul li,\r\n .es-footer-body ol li,\r\n .es-footer-body a {\r\n font-size: 16px!important\r\n }\r\n .es-infoblock p,\r\n .es-infoblock ul li,\r\n .es-infoblock ol li,\r\n .es-infoblock a {\r\n font-size: 12px!important\r\n }\r\n *[class="gmail-fix"] {\r\n display: none!important\r\n }\r\n .es-m-txt-c,\r\n .es-m-txt-c h1,\r\n .es-m-txt-c h2,\r\n .es-m-txt-c h3 {\r\n text-align: center!important\r\n }\r\n .es-m-txt-r,\r\n .es-m-txt-r h1,\r\n .es-m-txt-r h2,\r\n .es-m-txt-r h3 {\r\n text-align: right!important\r\n }\r\n .es-m-txt-l,\r\n .es-m-txt-l h1,\r\n .es-m-txt-l h2,\r\n .es-m-txt-l h3 {\r\n text-align: left!important\r\n }\r\n .es-m-txt-r img,\r\n .es-m-txt-c img,\r\n .es-m-txt-l img {\r\n display: inline!important\r\n }\r\n .es-button-border {\r\n display: block!important\r\n }\r\n .es-button {\r\n font-size: 20px!important;\r\n display: block!important;\r\n border-width: 10px 0px 10px 0px!important\r\n }\r\n .es-btn-fw {\r\n border-width: 10px 0px!important;\r\n text-align: center!important\r\n }\r\n .es-adaptive table,\r\n .es-btn-fw,\r\n .es-btn-fw-brdr,\r\n .es-left,\r\n .es-right {\r\n width: 100%!important\r\n }\r\n .es-content table,\r\n .es-header table,\r\n .es-footer table,\r\n .es-content,\r\n .es-footer,\r\n .es-header {\r\n width: 100%!important;\r\n max-width: 600px!important\r\n }\r\n .es-adapt-td {\r\n display: block!important;\r\n width: 100%!important\r\n }\r\n .adapt-img {\r\n width: 100%!important;\r\n height: auto!important\r\n }\r\n .es-m-p0 {\r\n padding: 0px!important\r\n }\r\n .es-m-p0r {\r\n padding-right: 0px!important\r\n }\r\n .es-m-p0l {\r\n padding-left: 0px!important\r\n }\r\n .es-m-p0t {\r\n padding-top: 0px!important\r\n }\r\n .es-m-p0b {\r\n padding-bottom: 0!important\r\n }\r\n .es-m-p20b {\r\n padding-bottom: 20px!important\r\n }\r\n .es-mobile-hidden,\r\n .es-hidden {\r\n display: none!important\r\n }\r\n .es-desk-hidden {\r\n display: table-row!important;\r\n width: auto!important;\r\n overflow: visible!important;\r\n float: none!important;\r\n max-height: inherit!important;\r\n line-height: inherit!important\r\n }\r\n .es-desk-menu-hidden {\r\n display: table-cell!important\r\n }\r\n table.es-table-not-adapt,\r\n .esd-block-html table {\r\n width: auto!important\r\n }\r\n table.es-social {\r\n display: inline-block!important\r\n }\r\n table.es-social td {\r\n display: inline-block!important\r\n }\r\n }\r\n \r\n #outlook a {\r\n padding: 0;\r\n }\r\n \r\n .ExternalClass {\r\n width: 100%;\r\n }\r\n \r\n .ExternalClass,\r\n .ExternalClass p,\r\n .ExternalClass span,\r\n .ExternalClass font,\r\n .ExternalClass td,\r\n .ExternalClass div {\r\n line-height: 100%;\r\n }\r\n \r\n .es-button {\r\n mso-style-priority: 100!important;\r\n text-decoration: none!important;\r\n }\r\n \r\n a[x-apple-data-detectors] {\r\n color: inherit!important;\r\n text-decoration: none!important;\r\n font-size: inherit!important;\r\n font-family: inherit!important;\r\n font-weight: inherit!important;\r\n line-height: inherit!important;\r\n }\r\n \r\n .es-desk-hidden {\r\n display: none;\r\n float: left;\r\n overflow: hidden;\r\n width: 0;\r\n max-height: 0;\r\n line-height: 0;\r\n mso-hide: all;\r\n }\r\n </style>\r\n</head>\r\n\r\n<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;">\r\n <div class="es-wrapper-color" style="background-color:#F6F6F6;">\r\n <!--[if gte mso 9]>\r\n\t\t\t<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">\r\n\t\t\t\t<v:fill type="tile" color="#f6f6f6"></v:fill>\r\n\t\t\t</v:background>\r\n\t\t<![endif]-->\r\n <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;">\r\n <tr style="border-collapse:collapse;">\r\n <td valign="top" style="padding:0;Margin:0;">\r\n <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%;">\r\n <tr style="border-collapse:collapse;">\r\n <td align="center" style="padding:0;Margin:0;">\r\n <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;">\r\n <tr style="border-collapse:collapse;">\r\n <td align="left" style="padding:20px;Margin:0;">\r\n <!--[if mso]><table width="560"><tr><td width="356" valign="top"><![endif]-->\r\n <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;">\r\n <tr style="border-collapse:collapse;">\r\n <td width="356" class="es-m-p0r es-m-p20b" valign="top" align="center" style="padding:0;Margin:0;">\r\n <table cellpadding="0" cellspacing="0" width="100%" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;">\r\n <tr style="border-collapse:collapse;">\r\n <td align="left" class="es-infoblock es-m-txt-c" style="padding:0;Margin:0;line-height:120%;font-size:12px;color:#CCCCCC;">\r\n <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>\r\n </td>\r\n </tr>\r\n </table>\r\n </td>\r\n </tr>\r\n </table>\r\n <!--[if mso]></td><td width="20"></td><td width="184" valign="top"><![endif]-->\r\n <table cellpadding="0" cellspacing="0" align="right" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;">\r\n <tr style="border-collapse:collapse;">\r\n <td width="184" align="left" style="padding:0;Margin:0;">\r\n <table cellpadding="0" cellspacing="0" width="100%" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;">\r\n <tr style="border-collapse:collapse;">\r\n <td align="right" class="es-infoblock es-m-txt-c" style="padding:0;Margin:0;line-height:120%;font-size:12px;color:#CCCCCC;">\r\n <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>\r\n </td>\r\n </tr>\r\n </table>\r\n </td>\r\n </tr>\r\n </table>\r\n <!--[if mso]></td></tr></table><![endif]-->\r\n </td>\r\n </tr>\r\n </table>\r\n </td>\r\n </tr>\r\n </table>\r\n <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%;">\r\n <tr style="border-collapse:collapse;">\r\n <td align="center" style="padding:0;Margin:0;">\r\n <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;">\r\n <tr style="border-collapse:collapse;">\r\n <td align="left" style="padding:20px;Margin:0;">\r\n <table cellpadding="0" cellspacing="0" width="100%" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;">\r\n <tr style="border-collapse:collapse;">\r\n <td width="560" align="center" valign="top" style="padding:0;Margin:0;">\r\n <table cellpadding="0" cellspacing="0" width="100%" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;">\r\n <tr style="border-collapse:collapse;">\r\n <td align="left" style="padding:0;Margin:0;padding-bottom:15px;">\r\n <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>\r\n </td>\r\n </tr>\r\n <tr style="border-collapse:collapse;">\r\n </tr>\r\n <tr style="border-collapse:collapse;">\r\n <td align="left" style="padding:0;Margin:0;padding-top:20px;">\r\n <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\xe2\x80\x99s the time to insert your own content into it by dragging blocks and structures from the side panel to this template area.</p>\r\n </td>\r\n </tr>\r\n </table>\r\n </td>\r\n </tr>\r\n </table>\r\n </td>\r\n </tr>\r\n <tr style="border-collapse:collapse;">\r\n <td align="left" style="Margin:0;padding-top:20px;padding-bottom:20px;padding-left:20px;padding-right:20px;">\r\n <!--[if mso]><table width="560"><tr><td width="270" valign="top"><![endif]-->\r\n <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;">\r\n <tr style="border-collapse:collapse;">\r\n <td width="270" class="es-m-p20b" align="left" style="padding:0;Margin:0;">\r\n <table cellpadding="0" cellspacing="0" width="100%" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;">\r\n <tr style="border-collapse:collapse;">\r\n <td align="left" style="padding:0;Margin:0;">\r\n <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>\r\n </td>\r\n </tr>\r\n <tr style="border-collapse:collapse;">\r\n <td align="left" style="padding:0;Margin:0;padding-top:20px;">\r\n <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>\r\n </td>\r\n </tr>\r\n </table>\r\n </td>\r\n </tr>\r\n </table>\r\n <!--[if mso]></td><td width="20"></td><td width="270" valign="top"><![endif]-->\r\n <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;">\r\n <tr style="border-collapse:collapse;">\r\n <td width="270" align="left" style="padding:0;Margin:0;">\r\n <table cellpadding="0" cellspacing="0" width="100%" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;">\r\n <tr style="border-collapse:collapse;">\r\n </tr>\r\n <tr style="border-collapse:collapse;">\r\n <td align="center" style="padding:0;Margin:0;padding-top:10px;">\r\n <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>\r\n </td>\r\n </tr>\r\n <tr style="border-collapse:collapse;">\r\n <td align="left" style="padding:0;Margin:0;padding-top:5px;">\r\n <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>\r\n </td>\r\n </tr>\r\n </table>\r\n </td>\r\n </tr>\r\n </table>\r\n <!--[if mso]></td></tr></table><![endif]-->\r\n </td>\r\n </tr>\r\n </table>\r\n </td>\r\n
这个问题有两个方面。
要设置模板，只需执行以下操作：
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 模板分配给一个变量。然后包含该文件并分配变量。
要替换模板的部分内容，我将.replaceAll在模板上使用。
var nameFromSomeInput = 'Jane Doe';
var yourHtmlTemplate = '<html>Dear {{NAME}}</html>';
message.html = yourHtmlTemplate.replaceAll('{{NAME}}', nameFromSomeInput);
请注意，这replaceAll很简单，并且不依赖于任何其他库。然而它很慢。replaceAll特别是如果您通过多次调用来替换多个值。
| 归档时间： |
|
| 查看次数： |
5364 次 |
| 最近记录： |