Flutter Web实现保存联系人：生成VCF或唤起系统联系人表单

一、生成VCF文件并触发下载（跨平台Web通用） #

Web端无需依赖path_provider，直接通过dart:html的AnchorElement创建下载链接，将VCF内容以Data URI形式提供给浏览器，触发下载操作。

实现步骤： #

1. 导入dart:html包（仅Web环境生效，可通过条件编译避免移动端报错）
2. 构造标准vCard 3.0格式字符串（兼容性最优）
3. 创建AnchorElement，设置href为VCF内容的Data URI，指定download属性定义文件名
4. 触发元素点击事件完成下载

代码示例： #

import 'dart:html' as html;
import 'dart:convert';

void saveContactAsVCF({
  required String name,
  required String phone,
  String? email,
}) {
  // 构造vCard核心内容
  final vcfContent = '''BEGIN:VCARD
VERSION:3.0
FN:$name
TEL;TYPE=CELL:$phone${email != null ? '\nEMAIL;TYPE=INTERNET:$email' : ''}
END:VCARD''';

  // 编码为Base64格式的Data URI
  final encodedContent = base64.encode(utf8.encode(vcfContent));
  final dataUri = 'data:text/vcard;charset=utf-8;base64,$encodedContent';

  // 创建隐藏的下载链接
  final anchor = html.AnchorElement(href: dataUri)
    ..setAttribute('download', '${name.replaceAll(' ', '_')}.vcf')
    ..style.display = 'none';

  // 触发下载并清理元素
  html.document.body?.append(anchor);
  anchor.click();
  anchor.remove();
}

如果项目同时支持移动端，用条件编译隔离Web代码：

import 'dart:io' show Platform;

void handleSaveContact() {
  if (Platform.isWeb) {
    saveContactAsVCF(name: '张三', phone: '13800138000', email: 'zhangsan@example.com');
  } else {
    // 移动端原有逻辑（如使用contacts类插件）
  }
}

二、唤起系统新建联系人表单（移动端Web优先） #

部分移动端浏览器（Chrome、Safari等）支持直接打开VCF文件，唤起系统联系人添加界面。只需调整上述代码，去掉download属性即可：

代码示例： #

void openContactForm({
  required String name,
  required String phone,
  String? email,
}) {
  final vcfContent = '''BEGIN:VCARD
VERSION:3.0
FN:$name
TEL;TYPE=CELL:$phone${email != null ? '\nEMAIL;TYPE=INTERNET:$email' : ''}
END:VCARD''';

  final encodedContent = base64.encode(utf8.encode(vcfContent));
  final dataUri = 'data:text/vcard;charset=utf-8;base64,$encodedContent';

  final anchor = html.AnchorElement(href: dataUri)
    ..style.display = 'none';

  html.document.body?.append(anchor);
  anchor.click();
  anchor.remove();
}

说明：桌面Web端会直接下载VCF文件，用户可手动导入系统通讯录；移动端Web端会尝试唤起系统联系人应用的新建表单（取决于浏览器和系统支持情况）。

三、兼容性补充 #

• 桌面Web：下载后的VCF文件可直接导入Outlook、Mac通讯录等工具
• 移动端Web：若浏览器不支持唤起表单，会自动降级为下载VCF，用户手动打开即可导入
• 无需依赖移动端专属插件，Web端通过原生HTML API即可实现全平台需求

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