html不能直接创建vcard,需用javascript构造合法vcard字符串并触发下载;仅是语义标签,不含vcard必需字段和版本声明,无法被通讯录识别。

HTML 本身不直接“创建 vCard”,它只能用语义化标签结构模拟联系人信息;真要生成标准 .vcf 文件,得靠后端或 JavaScript 导出逻辑。
为什么 <address></address> 不等于 vCard
<address></address> 是 HTML5 的语义标签,仅用于标记“文档/文章的作者联系信息”,不是数据交换格式。浏览器不会把它解析成可导入通讯录的 vCard,邮件客户端、手机系统也完全无视它。
- 它不包含
TEL、EMAIL、ORG等 vCard 必需字段 - 没有版本声明(如
VERSION:3.0)和编码要求(如CHARSET=UTF-8) - 搜索引擎可能提取它作 SEO 用,但不会触发“添加到通讯录”按钮
怎么让网页支持“点击导出 vCard”
核心是用 JavaScript 构造合法的 vCard 字符串,再触发下载。HTML 只负责提供原始数据(姓名、电话等),别试图用 div 套 class 模拟字段名。
- vCard 3.0 是兼容性最好的版本,避免用 4.0(iOS 旧版、Outlook 部分版本不认)
- 字段值必须转义:逗号、分号、换行符要用
\,、\;、\n,中文建议加CHARSET=UTF-8 - 用
data:text/vcard;charset=utf-8,+ URL 编码字符串实现无请求下载,比 FormData + 后端更轻量
示例关键片段:
立即学习“前端免费学习笔记(深入)”;
const vcard = `BEGIN:VCARD
VERSION:3.0
N:张;三;;;
FN:张三
TEL;TYPE=mobile:+86-13800138000
EMAIL:zhangsan@example.com
END:VCARD`;
const blob = new Blob([vcard], { type: 'text/vcard;charset=utf-8' });
const url = URL.createObjectURL(blob);
// 然后绑定到 <a href="${url}" download="zhangsan.vcf">导出</a>
常见错误:用 microdata 或 JSON-LD “假装”是 vCard
Google 支持 Person 结构化数据,但那是给搜索结果用的,不是给用户通讯录用的。即使你写了完美的 itemprop="telephone",点击网页依然无法一键保存为 .vcf。
- microdata / JSON-LD 不触发浏览器下载行为,也不被通讯录 App 读取
- 部分插件(如 vCard Generator)会扫描页面 DOM 提取文本,但极度不可靠:它猜
<span class="phone"></span>是电话,但遇到<div>Tel: 138...</div>就失效 - 真正可靠的路径只有一条:显式构造 vCard 字符串 + 用户主动点击下载
vCard 的坑不在结构,而在换行、转义、版本和 MIME 类型——少一个 \n 或错写 TYPE=cell(正确是 TYPE=cell 在 3.0 中无效,得用 TYPE=mobile),iOS 就静默失败。别省那几行转义逻辑。











