前言

下载vcard(.vcf)文件可以在移动端快捷保存联系人信息，相当于一个电子名片，用户只需要扫描二维码进入电子名片网页，点击保存既可弹出联系人信息弹窗快捷保存电话号码之类的信息。

vcard

vcf文件其实就是对信息的一个描述，他是一个字符串格式，大体格式如下

    `BEGIN:VCARD\nVERSION:3.0\nN;CHARSET=UTF-8: ; ${联系人姓名};;;\nFN;CHARSET=UTF-8: ${联系人姓名}  \nTITLE;CHARSET=UTF-8:${联系人职位，标签等}\nORG;CHARSET=UTF-8:${联系人公司名称}\nADR;PREF=1;Address=\"${联系人地址}\":;;${联系人地址}\nTEL;TYPE=mobile:${联系人手机号}\nTEL;TYPE=work:${联系人工作号码}\nEMAIL;Email:${联系人邮箱地址}\nURL;TYPE=profile:${联系人个人网址}\nURL;TYPE=work:${联系人公司网址}\nEND:VCARD`

具体的可以百度一下vcard格式，上面那份数据是针对ios系统的联系人信息格式，安卓可能会有些许字段不同，基于系统

h5下载vcf

这一步其实很简单，就是将这一段数据生成一个文件流，然后用a标签下载就可以了。

const handleSave =()=>{
  let file = new File([
    `BEGIN:VCARD\nVERSION:3.0\nN;CHARSET=UTF-8: ; ${data[props.dataKey].full_name};;;\nFN;CHARSET=UTF-8: ${data[props.dataKey].full_name}  \nTITLE;CHARSET=UTF-8:${data[props.dataKey].title}\nORG;CHARSET=UTF-8:${data[props.dataKey].COMPANY}\nADR;PREF=1;Address=\"${data[props.dataKey].ADDRESS}\":;;${data[props.dataKey].ADDRESS}\nTEL;TYPE=mobile:${data[props.dataKey].mobile}\nTEL;TYPE=work:${data[props.dataKey].workTel}\nEMAIL;Email:${data[props.dataKey].email}\nURL;TYPE=profile:${window.location.href}\nURL;TYPE=work:${data[props.dataKey].WEBSITE}\nEND:VCARD`
  ],'',{ type: "text/vcard;charset=utf-8" })
  const a = document.createElement('a')
  const href = window.URL.createObjectURL(file)
  a.href = href
  a.target = 'blank'
  a.download = `${data[props.dataKey].full_name}'s Contact.vcf`
  document.body.appendChild(a)
  a.click()
  document.body.removeChild(a)
}

可以用file也可以用blob。但是要注意，生成的文件类型要写成text/vcard,这样在ios端可以直接唤醒通讯录，非常的方便。不然的话浏览器会把他当成一个普通的文件让用户下载，下载下来之后需要手动的去分享到通讯录才能将信息带过去。