vCard（.vcf）文件格式概述
vCard是一种用于电子名片的标准文件格式，允许用户在不同设备和应用程序之间交换联系人信息。它本质上是一个纯文本文件，由一系列属性-值对组成，每个属性代表联系人的一项信息，例如姓名、电话、电子邮件、地址、照片等。理解vCard的结构是生成其文件的关键。
一个基本的vCard文件结构如下：
BEGIN:VCARD VERSION:4.0 FN:Full Name TEL;TYPE=work,voice:+1234567890 EMAIL:email@example.com END:VCARD
其中：
- BEGIN:VCARD 和 END:VCARD 标记vCard的开始和结束。
- VERSION 指定vCard的版本，推荐使用最新版本如4.0。
- FN (Formatted Name) 是联系人的完整名称。
- TEL (Telephone) 是电话号码，可以指定类型（如TYPE=work,voice）。
- EMAIL 是电子邮件地址。
JavaScript生成基础vCard文件
在Web环境中，我们可以通过JavaScript构建vCard字符串，然后将其封装为Blob对象，并通过创建标签模拟点击下载。以下是生成基础vCard的代码示例：
立即学习“Java免费学习笔记（深入）”；
document.getElementById("save-btn").addEventListener("click", function() {
const contact = {
name: "张三",
phone: "13800138000",
email: "zhangsan@example.com"
};
let vcard = `BEGIN:VCARD
VERSION:4.0
FN:${contact.name}
TEL;TYPE=work,voice:${contact.phone}
EMAIL:${contact.email}
END:VCARD`;
const blob = new Blob([vcard], { type: "text/vcard;charset=utf-8" });
const url = URL.createObjectURL(blob);
const newLink = document.createElement('a');
newLink.download = `${contact.name}.vcf`;
newLink.href = url;
newLink.style.display = 'none'; // 隐藏链接
document.body.appendChild(newLink); // 添加到DOM
newLink.click(); // 模拟点击
document.body.removeChild(newLink); // 移除链接
URL.revokeObjectURL(url); // 释放URL对象
});此代码片段可以成功生成一个包含姓名、电话和电子邮件的基础vCard文件。
添加联系人照片（PHOTO属性）
为vCard添加照片是提升其专业性和个性化的重要一步。vCard标准通过PHOTO属性支持图片。根据vCard版本和图片来源，PHOTO属性的格式有所不同。对于vCard 4.0，我们通常使用以下两种方式：
-
通过URL引用图片： 当图片已托管在可访问的URL上时，可以直接引用。
PHOTO;MEDIATYPE=image/jpeg:http://example.com/path/to/your/photo.jpg
其中MEDIATYPE指定图片类型（如image/jpeg，image/png等）。
-
通过Base64编码嵌入图片： 当图片需要直接嵌入vCard文件内部时，可以将其转换为Base64编码字符串。
PHOTO;ENCODING=BASE64;TYPE=JPEG:[base64-encoded-image-data]
ENCODING=BASE64表示图片数据是Base64编码的，TYPE指定图片格式。请注意，Base64编码的图片数据会使vCard文件体积增大。
微尔企业网站管理系统动态智能版1.1 build 101029下载* 包含企业网所需要要的所有常用功能 * 单页企业信息页面(如公司简介、联系方式等类似页面)可以自由增加删除，自己设置文件名 * 完整的产品功能模块 * 人才招聘模块，可以直接在线提交简历 * 新闻文章模块，可自由设置二级文章分类，并对每个分类使用不同模板，如定制某个文章分类为图片分类，视频分类等 * 扩展功能包含公告、留言、友情链接等 把本系统解压到网站根目录即可使用 后台管理目录：
JavaScript实现示例：
为了在JavaScript中实现，你需要获取图片的URL或Base64数据。以下示例展示了如何将PHOTO属性添加到vCard字符串中。
// 假设 contact 对象中包含 photoUrl 或 photoBase64
const contact = {
name: "李四",
phone: "13912345678",
email: "lisi@example.com",
photoUrl: "https://example.com/path/to/lisi_avatar.jpg", // 示例图片URL
// 或者 photoBase64: "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD..." // 示例Base64数据
};
let vcard = `BEGIN:VCARD
VERSION:4.0
FN:${contact.name}
TEL;TYPE=work,voice:${contact.phone}
EMAIL:${contact.email}`;
// 添加图片
if (contact.photoUrl) {
// 假设图片是JPEG格式
vcard += `\nPHOTO;MEDIATYPE=image/jpeg:${contact.photoUrl}`;
} else if (contact.photoBase64) {
// 假设 photoBase64 已经包含了 "data:image/jpeg;base64," 前缀
// 提取纯Base64数据部分，并根据实际图片类型调整 TYPE
const base64Data = contact.photoBase64.split(',')[1];
const mimeType = contact.photoBase64.split(',')[0].split(':')[1].split(';')[0];
const imageType = mimeType.split('/')[1].toUpperCase(); // 例如 'JPEG', 'PNG'
vcard += `\nPHOTO;ENCODING=BASE64;TYPE=${imageType}:${base64Data}`;
}
vcard += `\nEND:VCARD`;
// 后续的Blob和下载逻辑同上注意事项：
- Base64编码的图片数据通常以data:image/jpeg;base64,...的形式存在。在将其加入vCard时，只需要base64,之后的数据部分。
- 图片文件大小会直接影响vCard文件的大小。对于嵌入式Base64图片，建议使用较小的图片以避免文件过大。
- 确保MEDIATYPE或TYPE与实际图片格式匹配。
扩展更多联系人详细信息
vCard标准提供了丰富的属性来描述联系人的各种信息，例如公司、职位、地址、网址、备注等。以下是一些常用的vCard 4.0属性及其格式：
-
ORG (Organization): 公司/组织名称
ORG:Your Company Name
-
TITLE (Title): 职位
TITLE:Your Job Title
-
ADR (Address): 地址，通常包含多个子字段，用分号;分隔。
格式：ADR;TYPE=work:PO Box;Suite;Street;City;State/Province;Postal Code;Country
例如：
ADR;TYPE=work:;;1600 Amphitheatre Parkway;Mountain View;CA;94043;USA
（注意：前两个分号表示PO Box和Suite为空）
-
URL (URL): 个人或公司网站
URL:http://www.yourwebsite.com
-
NOTE (Note): 备注信息
NOTE:This is a personal note about the contact.
-
BDAY (Birthday): 生日
BDAY:19900101
-
REV (Revision): vCard最后修改时间（ISO 8601格式）
REV:20231027T103000Z
整合所有信息到JavaScript代码中：
将上述属性整合到JavaScript生成的vCard字符串中，可以构建一个非常详细的数字名片。
document.getElementById("save-btn").addEventListener("click", function() {
const contact = {
name: "王五",
phone: "13777777777",
email: "wangwu@example.com",
photoUrl: "https://example.com/path/to/wangwu_avatar.jpg", // 替换为实际图片URL
organization: "未来科技公司",
title: "高级软件工程师",
address: {
street: "科技园路100号",
city: "深圳市",
state: "广东省",
zip: "518000",
country: "中国"
},
website: "https://www.futuretech.com",
note: "王五是公司核心技术骨干，负责前端开发。"
};
let vcard = `BEGIN:VCARD
VERSION:4.0
FN:${contact.name}
TEL;TYPE=work,voice:${contact.phone}
EMAIL:${contact.email}`;
// 添加图片
if (contact.photoUrl) {
vcard += `\nPHOTO;MEDIATYPE=image/jpeg:${contact.photoUrl}`;
}
// 如果有Base64图片，可以类似上面 PHOTO 属性的逻辑添加
// 添加组织和职位
if (contact.organization) {
vcard += `\nORG:${contact.organization}`;
}
if (contact.title) {
vcard += `\nTITLE:${contact.title}`;
}
// 添加地址
if (contact.address) {
const { street, city, state, zip, country } = contact.address;
// ADR 格式: PO Box;Suite;Street;City;State/Province;Postal Code;Country
// 这里我们只填充 Street, City, State, Postal Code, Country
vcard += `\nADR;TYPE=work:;;${street};${city};${state};${zip};${country}`;
}
// 添加网址
if (contact.website) {
vcard += `\nURL:${contact.website}`;
}
// 添加备注
if (contact.note) {
vcard += `\nNOTE:${contact.note}`;
}
// 添加修订时间（可选）
vcard += `\nREV:${new Date().toISOString().replace(/[-:]|\.\d{3}/g, '')}`; // ISO 8601格式
vcard += `\nEND:VCARD`;
// 创建并下载文件
const blob = new Blob([vcard], { type: "text/vcard;charset=utf-8" });
const url = URL.createObjectURL(blob);
const newLink = document.createElement('a');
newLink.download = `${contact.name}.vcf`;
newLink.href = url;
newLink.style.display = 'none';
document.body.appendChild(newLink);
newLink.click();
document.body.removeChild(newLink);
URL.revokeObjectURL(url);
});总结与注意事项
通过上述步骤，我们可以使用JavaScript灵活地生成包含图片和各种详细信息的vCard文件。在实际应用中，还需要注意以下几点：
- vCard版本兼容性： 尽管推荐使用vCard 4.0，但某些旧设备或应用程序可能只支持v2.1或v3.0。在处理PHOTO等属性时，它们的格式有所不同。如果需要广泛兼容性，可能需要考虑生成多个版本或使用更通用的属性。
- 数据清洗与验证： 在将用户输入的数据写入vCard之前，务必进行清洗和验证，以防止注入无效字符或格式错误，导致vCard文件无法被正确解析。
- 图片处理： 如果选择Base64编码图片，请确保图片大小适中，过大的图片会显著增加vCard文件体积，影响下载和导入速度。在前端，可以使用Canvas API或第三方库对图片进行压缩和Base64编码。
- 字符编码： 确保vCard文件使用UTF-8编码（charset=utf-8），以正确显示非英文字符（如中文）。
- 用户体验： 在下载文件时，确保提供明确的反馈，例如下载成功提示，并清理不再需要的DOM元素和URL对象，以避免内存泄漏。
通过掌握vCard的结构和JavaScript的文件操作能力，开发者可以为用户提供一个便捷、功能强大的数字名片生成和分享方案。
