使用JavaScript生成包含图片及详细信息的vCard联系人文件

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

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对象
});

// 假设 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和下载逻辑同上

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);
});