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

先给你直接上修改后的完整代码，之后再拆解每个新增部分的逻辑：

完整修改后的JavaScript代码 #

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

saveBtn.addEventListener("click", async function() {
  // 扩展联系人信息，包含新增的公司、职位、地址、照片字段
  var contact = {
    name: "John Smith",
    phone: "555-555-5555",
    email: "john@example.com",
    company: "Example Inc.",
    title: "Senior Developer",
    address: {
      street: "123 Main St",
      city: "Anytown",
      region: "CA",
      postalCode: "12345",
      country: "USA"
    },
    photoUrl: "https://example.com/john-smith.jpg" // 替换成你的实际照片地址
  };

  // 处理照片：将在线图片转换为Base64编码（vCard要求的格式）
  let photoBase64 = "";
  if (contact.photoUrl) {
    try {
      const response = await fetch(contact.photoUrl);
      const blob = await response.blob();
      photoBase64 = await new Promise((resolve) => {
        const reader = new FileReader();
        reader.onloadend = () => resolve(reader.result.split(",")[1]);
        reader.readAsDataURL(blob);
      });
    } catch (error) {
      console.error("照片加载失败:", error);
    }
  }

  // 拼接完整的vCard内容
  var vcard = `BEGIN:VCARD
VERSION:4.0
FN:${contact.name}
ORG:${contact.company}
TITLE:${contact.title}
TEL;TYPE=work,voice:${contact.phone}
EMAIL;TYPE=work:${contact.email}
ADR;TYPE=work:;;${contact.address.street};${contact.address.city};${contact.address.region};${contact.address.postalCode};${contact.address.country}
`;

  // 如果照片转换成功，追加到vCard里
  if (photoBase64) {
    vcard += `PHOTO;TYPE=JPEG;ENCODING=BASE64:${photoBase64}\n`;
  }

  vcard += "END: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);
});

页面按钮代码（无需修改） #

<button id="save-btn">Save Contact</button>

新增字段的逻辑说明 #

• 公司与职位：直接用vCard标准字段ORG存公司名，TITLE存职位，格式直接照搬就行
• 地址：用ADR字段，格式为ADR;TYPE=work:;;街道;城市;省份;邮编;国家，每个部分用分号分隔，空的部分留着分号别删（比如不需要门牌号就保留开头的两个分号）
• 照片：vCard要求照片必须是Base64编码格式，代码里已经写了自动转换逻辑——只要替换contact.photoUrl为你的实际照片链接即可。如果照片加载失败，控制台会输出错误，但不影响其他字段生成
• 内存优化：加了URL.revokeObjectURL(url)，下载完成后释放创建的临时URL，避免浏览器占用多余内存

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