How To Generate A VCF(VCard File) In Node Js?

Sharing or managing contact information is very commonly used and you must have seen that business people or at many places, a person is giving you his card which contains all his contact details. But what if I tell you that you can make this contact Card virtually? This digital contact card is known as a VCard or Virtual Card which is generated through VCF files.  In this blog, we will learn how to generate a VCard in nodejs.

What is a VCF file?

VCF or Virtual Contact File stores information such as name, phone numbers, address, email addresses, website, and other social URLs, constituting all the contact details a person might wanna share to with others. Vcf files have ‘.vcf’ as an extension.

Creating a VCF File in node js

To create a vcf file in node js, we will be using a package from the node js library only.

We will be using the vcard-creator package to create and manipulate the vcf file in the node.

NOTE: On searching for a vcf file creation package, “VCard Js “ and “vcard-creator” are the most recommended packages. We do not prefer VCard js if you want to add URLs in your vcard, because VCard js does not display the URLs properly. 

  • Open your node js project or create a new project and set up a working nodejs directory with npm init.
  • Once your project is created, install the VCF package via npm.
<em>npm i vcard-creator</em>
Code language: HTML, XML (xml)
  • Now you can require the package and write the following code in your js file.
const VCard = require("vcard-creator").default; const fs = require("fs"); const my_vCard = new VCard(); my_vCard .addName("Technologies", "Codalien") .addPhoneNumber("+91-9899212131") .addJobtitle("Software") .addEmail("contact@codalien.com") .addNote( "Reliable & Scalable Software Solutions") .addAddress( "A-49, Block A,", "Mohan Cooperative Industrial Estate, Badarpur", "", "New Delhi", "Delhi", "110044", "India" , ) .addURL("https://codalien.com/") .addSocial("https://www.linkedin.com/company/codalien/", "Linkedin") .addSocial("https://instagram.com/codalien?igshid=MzRlODBiNWFlZA==","Instagram") .addSocial("https://www.youtube.com/@codalien", "Youtube"); fs.writeFileSync("./vcfFile.vcf", my_vCard.getOutput());
Code language: PHP (php)

In the above code, we have made a very simple Vcard, adding the important contact details, anybody would add to their Vcard such as name, phone number, address, email, social media URLs, etc. You can add or remove the VCard fields according to your wish.

There are a lot of other options that you can go through and explore if you like.

In the end, we created a file with the .vcf extension to save the output of the VCard.

Run the file with node filename.js and you’ll see a .vcf file created in your desired path.

BEGIN:VCARD VERSION:3.0 REV:2023-10-16T07:09:00.859Z N;CHARSET=utf-8:Technologies;Codalien;;; FN;CHARSET=utf-8:Codalien Technologies TEL:+91-9899212131 TITLE;CHARSET=utf-8:Software EMAIL;INTERNET:contact@codalien.com NOTE;CHARSET=utf-8:Reliable & Scalable Software Solutions ADR;WORK;POSTAL;CHARSET=utf-8:A-49, Block A,;Mohan Cooperative Industrial   Estate, Badarpur;;New Delhi;Delhi;110044;India URL:https://codalien.com/ X-SOCIALPROFILE;type=Linkedin:https://www.linkedin.com/company/codalien/ X-SOCIALPROFILE;type=Instagram:https://instagram.com/codalien?igshid=MzRl  ODBiNWFlZA== X-SOCIALPROFILE;type=Youtube:https://www.youtube.com/@codalien END:VCARD
Code language: PHP (php)

The output of the VCard will look like this.

Adding an image in your VCard

To add an image to your VCard, you need to keep in mind that the image provided should be encoded(base64) already. 

Also, you can provide the URL of the image but most of the applications will ignore the image URL, therefore prefer embedding the image with proper encoding(base64).

Let’s see an example of a Vcard with an image in it.

const VCard = require("vcard-creator").default; const fs = require("fs"); const my_vCard = new VCard(); const image = fs.readFileSync("./image.png", { encoding: "base64", flag: "r", }); my_vCard .addName("Technologies", "Codalien") .addPhoto(image, "PNG") .addJobtitle("Software") .addEmail("contact@codalien.com") fs.writeFileSync("./vcfFile.vcf", my_vCard.getOutput());
Code language: PHP (php)

In the above code, we first read an image and encoded it into base64.

Then with the .addPhoto() function, we embedded the encoded image along with the image type (png, jpeg, jpg) along with some basic contact details. Lastly, we store the output in the .vcf file.

Now run the file with node filename.js and you’ll see a .vcf file created in your desired path.

BEGIN:VCARD VERSION:3.0 REV:2023-10-16T07:13:40.481Z N;CHARSET=utf-8:Technologies;Codalien;;; FN;CHARSET=utf-8:Codalien Technologies PHOTO;ENCODING=b;TYPE=PNG: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 TITLE;CHARSET=utf-8:Software EMAIL;INTERNET:contact@codalien.com END:VCARD
Code language: JavaScript (javascript)

The output of the VCard with an image will look something like this.

Conclusion

This was all about the vcf file and how you can add this functionality to your website, providing a virtual contact card that would increase the User experience. This is all you need to know about creating a VCard. I hope you got a good and clear learning on the same. Creating and adding this feature is a super easy and straightforward process and you can easily embed it in your web applications.

You can further generate a vcf file for multiple contacts and can enhance handling contact information.

You can further integrate and customize this feature according to your specific use cases.


Posted

in

by

Recent Post

  • Mastering Software Testing Strategies: Your Guide

    Implementing best software testing strategies is a crucial part of software development, ensuring that digital products meet industry standards. Defined by the International Software Testing Qualification Board, it encompasses a range of activities, both static and dynamic, throughout the software’s lifecycle. As an essential component of the Software Development Life Cycle (SDLC), the Software Testing […]

  • Your Complete Guide to Securing Your Kubernetes Cluster: Essential Tips for Beginners

    In today’s digital landscape, Kubernetes has emerged as the go-to solution for managing applications at scale. However, amidst its power lies a crucial concern: security. Ensuring the safety of your Kubernetes cluster is paramount to protecting your applications, data, and infrastructure. This comprehensive guide will walk you through essential practices and tips to help you […]

  • How to use Cloudinary in Node.js to upload images?

    It’s simple to use Cloudinary to upload images in a Nodе.js application, which can improve your app’s imagе management capabilities. Wе’ll go over how to sеt up and incorporate Cloudinary in your Nodе.js application for imagе uploads and how to use Cloudinary nodejs in this blog article. What is Cloudinary? Cloudinary is a cloud-based media […]

  • Mobile App User Experience- 10 Biggest Mistakes First-Time Founders Make 

    With the mobile app industry hitting a whopping 206 Billion in value (as per Grand View Research), it is no wonder more entrepreneurs are jumping into the mobile app market with their innovative ideas and life-changing solutions. But for those taking their first plunge, it is crucial to understand that creating an app isn’t just […]

  • Building Draggable Components in React

    As user interaction becomes more prevalent in today’s applications, sometimes it’s nice to use draggable elements in your apps. Consider website builders like Trello or Wix. They have drag-and-drop features that make it easy and convenient for users. Hello everyone! In this article, I will show some simple ways to create draggable components in React […]

  • How to Fetch Data from an API with JavaScript?

    In web development, integrating data from external sources is a common task. Application Programming Interfaces (APIs) play an important function in changing data amongst systems. In this blog, we’ll explore the way to Get information from an API with the use of JavaScript, supplying step-by-step the resource of-step commands with complete code examples of how […]