A JavaScript vCard creator library for both node.js and the web
npm install vcard-creator

!tests
A JavaScript vCard 3.0 creator library for both node.js and the web.
It outputs the vCard text that should be saved as a *.vcf file.
This is based on _jeroendesloovere_'s [vCard][jeroendesloovere] for PHP.
``sh
pnpm add vcard-creator
npm install vcard-creator
`
Load vcard-creator directly from [skypack][skypack] (CDN).
`html`
Demo available in [codepen][codepen].
It's exposed through the _window_ global object as explained below.
index.html
`html`
main.js
`js
// Define a new vCard
var VCard = window.vcardcreator.default
var myVCard = new VCard()
// ...rest of the code
`
With a bundler (e.g. webpack) or in Node.js you can just require / import it.
`js
const VCard = require('vcard-creator').default
// Define a new vCard
const myVCard = new VCard()
`
Or...
`js
import VCard from 'vcard-creator'
// Define a new vCard
const myVCard = new VCard()
`
You need to provide the image already properly encoded (base64). Note that most
applications will probably ignore a photo URL, even if it adheres to the
specification.
`js
// Example in Node.js
const fs = require('fs')
const VCard = require('vcard-creator').default
const imagePath = './path/to/my/assets/sample.jpg'
const image = fs.readFileSync(imagePath, { encoding: 'base64', flag: 'r' })
const vCard = new VCard()
vCard.addPhoto(image, 'JPEG')
`
Include the proper [MIME type][mime-types] (defaults to JPEG).
For Apple devices that don't support the vcf file format, there is avcalendar
workaround. Specify the format of the output as and then save itics
with a file extension instead.
The trick is to create an iCalendar file with a vCard attached.
`js
// Define a new vCard as 'vcalendar'
const myVCalendar = new VCard('vcalendar')
// ...or set it afterwards
const myOtherVCalendar = new VCard()
myOtherVCalendar.setFormat('vcalendar')
`
`js
import VCard from 'vcard-creator'
// Define a new vCard
const myVCard = new VCard()
// Some variables
const lastname = 'Desloovere'
const firstname = 'Jeroen'
const additional = ''
const prefix = ''
const suffix = ''
myVCard
// Add personal data
.addName(lastname, firstname, additional, prefix, suffix)
// Add work data
.addCompany('Siesqo')
.addJobtitle('Web Developer')
.addRole('Data Protection Officer')
.addEmail('info@jeroendesloovere.be')
.addPhoneNumber(1234121212, 'PREF;WORK')
.addPhoneNumber(123456789, 'WORK')
.addAddress(null, null, 'street', 'worktown', null, 'workpostcode', 'Belgium')
.addSocial('https://twitter.com/desloovere_j', 'Twitter', 'desloovere_j')
.addURL('http://www.jeroendesloovere.be')
console.log(myVCard.toString())
`
Output
`txt`
BEGIN:VCARD
VERSION:3.0
REV:2017-08-31T17:00:15.850Z
N;CHARSET=utf-8:Desloovere;Jeroen;;;
FN;CHARSET=utf-8:Jeroen Desloovere
ORG;CHARSET=utf-8:Siesqo
TITLE;CHARSET=utf-8:Web Developer
ROLE;CHARSET=utf-8:Data Protection Officer
EMAIL;INTERNET:info@jeroendesloovere.be
TEL;PREF;WORK:1234121212
TEL;WORK:123456789
ADR;WORK;POSTAL;CHARSET=utf-8:name;extended;street;worktown;state;workpos
tcode;Belgium
X-SOCIALPROFILE;type=Twitter;x-user=desloovere_j:https://twitter.com/desl
oovere_j
URL:http://www.jeroendesloovere.be
END:VCARD
If you're interested in the development of this project, you can run some ready
to use commands to compile and test your changes.
`shBuild
pnpm build
pnpm test:functional
pnpm test:web-build
pnpm test:web-export
``
[codepen]: https://codepen.io/joaocarmo/pen/PozdprL
[jeroendesloovere]: https://github.com/jeroendesloovere/vcard
[mime-types]: https://www.iana.org/assignments/media-types/media-types.xhtml#image
[skypack]: https://skypack.dev