使用JavaScript生成高级vCard：集成图片与多字段数据

BEGIN:VCARD
VERSION:4.0
FN:Full Name
TEL;TYPE=work,voice:+1-555-555-5555
EMAIL:email@example.com
END:VCARD

// 假设你已经有了一张图片的Base64编码数据
// 实际应用中，这通常来自用户上传的文件，通过FileReader读取
// 示例Base64数据（这里仅为占位符，实际应替换为有效图片数据）
const photoBase64 = "/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQoLCwsmDg0NDg0MDhEJCAoMDAwMDwwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDL/wAARCAABAAEDAREAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAf/xAAUEAEAAAAAAAAAAAAAAAAAAAAA/8QAFAEBAAAAAAAAAAAAAAAAAAAAAf/xAAUEAEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwB4BAx//9k="; // 替换为你的实际Base64图片数据

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

saveBtn.addEventListener("click", function() {

  // 定义更全面的联系人信息
  var contact = {
    name: "John Smith",
    firstName: "John",
    lastName: "Smith",
    phone: "+1-555-555-5555",
    email: "john.smith@example.com",
    organization: "Example Solutions Inc.",
    title: "Senior Software Engineer",
    address: {
      street: "123 Main St",
      city: "Anytown",
      state: "CA",
      zip: "90210",
      country: "USA"
    },
    url: "http://www.johnsmith.com",
    birthday: "19850615", // YYYYMMDD
    note: "Key contact for project Alpha.",
    photo: photoBase64 // Base64编码的图片数据
  };

  // 构建vCard字符串
  let vcard = "BEGIN:VCARD\n";
  vcard += "VERSION:4.0\n"; // 推荐使用4.0版本

  // 姓名 (FN) 和 结构化姓名 (N)
  vcard += "FN:" + contact.name + "\n";
  vcard += "N:" + contact.lastName + ";" + contact.firstName + ";;;\n"; // N:姓;名;中间名;前缀;后缀

  // 电话 (TEL)
  vcard += "TEL;TYPE=work,voice:" + contact.phone + "\n";

  // 电子邮件 (EMAIL)
  vcard += "EMAIL:" + contact.email + "\n";

  // 组织 (ORG)
  if (contact.organization) {
    vcard += "ORG:" + contact.organization + "\n";
  }

  // 职位 (TITLE)
  if (contact.title) {
    vcard += "TITLE:" + contact.title + "\n";
  }

  // 地址 (ADR)
  if (contact.address) {
    const addr = contact.address;
    vcard += `ADR;TYPE=work:;;${addr.street};${addr.city};${addr.state};${addr.zip};${addr.country}\n`;
  }

  // 网址 (URL)
  if (contact.url) {
    vcard += "URL:" + contact.url + "\n";
  }

  // 生日 (BDAY)
  if (contact.birthday) {
    vcard += "BDAY:" + contact.birthday + "\n";
  }

  // 备注 (NOTE)
  if (contact.note) {
    vcard += "NOTE:" + contact.note + "\n";
  }

  // 照片 (PHOTO) - 使用Base64编码
  // 确保 photoBase64 不为空，并且是有效的Base64字符串
  if (contact.photo) {
    // 假设 photoBase64 是一个不带 "data:image/jpeg;base64," 前缀的纯Base64字符串
    // 如果包含前缀，需要先移除
    let cleanBase64 = contact.photo.split(',')[1] || contact.photo;
    // 根据图片类型设置 MEDIATYPE，这里假设是 JPEG
    vcard += "PHOTO;ENCODING=BASE64;MEDIATYPE=image/jpeg:" + cleanBase64 + "\n";
  }

  vcard += "END:VCARD";

  // 创建Blob对象并触发下载
  var blob = new Blob([vcard], {
    type: "text/vcard;charset=utf-8"
  }); // 加上 charset=utf-8 确保中文等字符编码正确
  var 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才能触发click
  newLink.click();
  document.body.removeChild(newLink); // 移除链接
  URL.revokeObjectURL(url); // 释放URL对象
});

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