如何在Flutter Web中发送带HTML正文的邮件？

可行性说明 #

url_launcher是可行的实现方案，但要注意不同邮件客户端/Web服务对HTML正文的支持存在差异。它的核心逻辑是构造符合mailto协议的URL，调用系统或Web端的邮件服务——部分主流服务会自动解析HTML内容，少数服务可能需要用户手动切换显示模式，个别轻量客户端则会直接显示HTML源码。

实现步骤 #

1. 编写HTML格式的邮件正文，对内容进行URL编码（避免特殊字符破坏链接结构）
2. 构造包含收件人、主题、编码后HTML正文的mailto链接
3. 调用url_launcher的launchUrl方法打开该链接

代码示例 #

import 'package:url_launcher/url_launcher.dart';
import 'dart:convert';

Future<void> sendHtmlEmail() async {
  // 定义HTML格式的邮件正文
  final htmlContent = '''
  <h2>订单确认通知</h2>
  <p>您好，您的订单已完成支付：</p>
  <ul>
    <li>订单编号：NO.20240518001</li>
    <li>支付金额：¥99.00</li>
  </ul>
  <p>点击 <a href="https://your-app.com/order">此处</a> 查看订单详情</p>
  ''';

  // 对HTML内容进行URL编码
  final encodedHtml = Uri.encodeComponent(htmlContent);
  // 构造mailto链接，替换为实际收件人和主题
  final mailtoUri = Uri.parse('mailto:user@example.com?subject=您的订单已完成&body=$encodedHtml');

  if (await canLaunchUrl(mailtoUri)) {
    await launchUrl(mailtoUri);
  } else {
    throw Exception('无法打开邮件客户端');
  }
}

关键注意事项 #

• Web端兼容性：Gmail、Outlook网页版等主流服务通常能自动解析HTML正文，但小众邮件服务可能不支持。
• 本地客户端兼容性：Apple Mail、Outlook桌面版等支持HTML渲染，但部分轻量邮件客户端会将HTML代码作为纯文本显示。
• 兼容性兜底：如果需要覆盖所有场景，建议在HTML正文前添加纯文本兜底内容，示例如下：

  final fallbackText = '若您的邮件客户端不支持HTML，请查看以下内容：\n\n';
  final fullContent = fallbackText + htmlContent;
  final encodedHtml = Uri.encodeComponent(fullContent);
  

内容的提问来源于stack exchange，提问作者My Car