React项目中vcards-js生成的vCard如何导出为.vcf可下载文件

核心实现步骤 #

• 将生成的vCard格式化字符串转换为UTF-8编码的Blob对象，指定正确的MIME类型
• 动态创建临时a标签，绑定Blob生成的临时URL，指定.vcf后缀的下载文件名
• 模拟触发a标签点击事件完成下载，事后销毁临时对象避免内存占用

完整代码示例 #

把你原有代码中// enter code here部分替换为下方下载逻辑即可：

// 如果你是前端直接收集用户数据，将req.body替换为你表单绑定的state/变量即可
const {fname,lname,phoneNumber,email,organisation,title}=req.body
  
const mycard=vcard()

mycard.firstName=fname
mycard.lastName=lname
mycard.phoneNumber=phoneNumber
mycard.email=email
mycard.organisation=organisation
mycard.title=title

// 新增下载逻辑
const vcardStr = mycard.getFormattedString()
// 转Blob对象，指定vCard对应的MIME类型和编码避免乱码
const blob = new Blob([vcardStr], { type: 'text/vcard;charset=utf-8' })
// 生成临时访问URL
const url = URL.createObjectURL(blob)
// 创建临时a标签
const link = document.createElement('a')
link.href = url
// 自定义下载文件名，可根据需求调整
link.download = `${fname}_${lname}_联系名片.vcf`
// 模拟点击触发下载
document.body.appendChild(link)
link.click()
// 清理临时资源避免内存泄漏
document.body.removeChild(link)
URL.revokeObjectURL(url)

console.log(vcardStr,"utf-8")

React组件绑定点击事件示例 #

import { useState } from 'react'
import vcard from 'vcards-js'

function VcardDownload() {
  // 此处为表单收集的用户数据，可根据你的业务逻辑调整
  const [formData, setFormData] = useState({
    fname: '',
    lname: '',
    phoneNumber: '',
    email: '',
    organisation: '',
    title: ''
  })

  const handleDownload = () => {
    const mycard = vcard()
    mycard.firstName = formData.fname
    mycard.lastName = formData.lname
    mycard.phoneNumber = formData.phoneNumber
    mycard.email = formData.email
    mycard.organisation = formData.organisation
    mycard.title = formData.title

    const vcardStr = mycard.getFormattedString()
    const blob = new Blob([vcardStr], { type: 'text/vcard;charset=utf-8' })
    const url = URL.createObjectURL(blob)
    const link = document.createElement('a')
    link.href = url
    link.download = `${formData.fname}_${formData.lname}_名片.vcf`
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
    URL.revokeObjectURL(url)
  }

  return <button onClick={handleDownload}>下载vCard名片</button>
}

注意事项 #

• 如果vCard包含中文内容，必须在Blob的type中指定charset=utf-8，否则会出现乱码
• 部分移动端浏览器对vcf格式文件的下载逻辑存在差异，上线前建议做对应场景的兼容测试

内容的提问来源于stack exchange，提问作者ramanjeet singh