如何使用JavaScript为vCard添加照片及更多联系人信息？

下面是针对商务场景优化后的代码，在原有保存功能基础上，支持添加公司、职位、地址、照片等扩展信息：

修改后的完整代码 #

HTML部分 #

<button id="save-btn">保存联系人</button>

JavaScript部分 #

var saveBtn = document.getElementById("save-btn");

saveBtn.addEventListener("click", function() {
  // 扩展后的联系人商务信息
  var contact = {
    name: "John Smith",
    phone: "555-555-5555",
    email: "john@example.com",
    company: "Example Corp",
    title: "Senior Developer",
    address: "123 Business Ave, Suite 456, New York, NY 10001",
    // 替换为实际图片的base64编码（示例为占位图）
    photo: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg=="
  };
  
  // 按vCard 4.0规范构建内容
  var vcardLines = [
    "BEGIN:VCARD",
    "VERSION:4.0",
    `FN:${contact.name}`,
    `TEL;TYPE=work,voice:${contact.phone}`,
    `EMAIL;TYPE=work:${contact.email}`,
    `ORG:${contact.company}`, // 公司字段
    `TITLE:${contact.title}`, // 职位字段
    `ADR;TYPE=work:;;${contact.address}`, // 工作地址
    // 嵌入照片：去掉base64前缀，保留编码部分
    `PHOTO;TYPE=png;ENCODING=b:${contact.photo.split(",")[1]}`
  ];
  
  var vcard = vcardLines.join("\n") + "\nEND:VCARD";
  
  var blob = new Blob([vcard], { type: "text/vcard" });
  var url = URL.createObjectURL(blob);

  const newLink = document.createElement('a');
  newLink.download = `${contact.name}.vcf`;
  newLink.href = url;
  newLink.click();
  
  // 释放URL对象，避免内存泄漏
  URL.revokeObjectURL(url);
});

关键字段说明 #

• 公司（ORG）：直接填写公司名称，支持多级组织（用分号分隔，如ORG:Example Corp;Tech Department）
• 职位（TITLE）：填写具体职位名称即可
• 地址（ADR）：遵循ADR;TYPE=work:;;街道地址;城市;州/省;邮编;国家格式，空字段用分号占位
• 照片（PHOTO）：
  1. 将图片转为base64编码（可通过在线工具或前端代码转换）
  2. 去除data:image/png;base64,这类前缀，仅保留编码字符串
  3. TYPE需匹配图片格式（如jpeg、gif）

注意事项 #

• 图片base64编码不宜过大，避免生成的vcf文件超出设备兼容体积
• 字段内容不要直接用换行符，需换行时用\n转义
• 不同通讯录应用对vCard字段的兼容性有差异，建议测试iOS通讯录、Android通讯录、Outlook等主流应用

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