Downloading vCard

Ask the community
1

I want to create a function for a dynamic page where data will be fetched from database fields & when user click on Add to Contacts button it will download the vcf file or open automatically to save in the phone. I’m using this code but not getting success.

import wixData from 'wix-data';

function createVCard(data) {
    return `
BEGIN:VCARD
VERSION:3.0
FN:${data.fullName}
TEL;TYPE=CELL:${data.contactNumber}
EMAIL:${data.email}
ADR;TYPE=WORK:${data.address}
ORG:${data.about}
URL:${data.instagram}
URL:${data.linkedIn}
URL:${data.whatsAppNumber}
PHOTO;ENCODING=BASE64:${data.profilePicture}
END:VCARD
    `;
}

$w.onReady(function () {
    // Get the current item from the dynamic dataset
    const currentItem = $w("#dynamicDataset").getCurrentItem();
    if (currentItem) {
        // Define the vCard data from the current item
        const vCardData = {
            fullName: currentItem.fullName,
            contactNumber: currentItem.contactNumber,
            about: currentItem.about,
            instagram: currentItem.instagram,
            linkedIn: currentItem.linkedIn,
            whatsAppNumber: currentItem.whatsAppNumber,
            email: currentItem.email,
            address: currentItem.fullAddress,
            profilePicture: currentItem.profilePicture
        };

        // Generate the vCard string
        const vCard = createVCard(vCardData);

        // Set the button click event to download the vCard
        $w("#addToContactsButton").onClick(() => {
            const blob = new Blob([vCard], { type: "text/vcard" });
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = `${currentItem.fullName}.vcf`;
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(url);
        });
    }
});