当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript生成带图片的vCard教程

JavaScript生成带图片的vCard教程

2025-08-02 11:57:28 0浏览收藏

本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的，希望这篇《JavaScript生成带图片的vCard联系人文件教程》对你有很大帮助！欢迎收藏，分享给更多的需要的朋友学习~

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

本文旨在指导读者如何利用JavaScript动态生成功能更全面的vCard（.vcf）联系人文件。我们将从基础的姓名、电话、邮件信息出发，逐步深入，详细讲解如何根据vCard标准添加联系人照片（支持URL或Base64编码），并扩展公司、职位、地址等更多详细信息，最终提供一个完整的JavaScript实现方案，帮助用户创建丰富且专业的数字名片。

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的代码示例：

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文件体积增大。

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与实际图片格式匹配。

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