JS Tutorial: Schnell und einfach VCARD Kontakte generieren

Folgendes JS habe ich vorbereitet. Dies muss nur in die gewünschte JavaScript Datei eingefügt werden. Der Script wird dann beim Laden ausgeführt und sucht im HTML nach den VCARD Bereichen:

    if(document.querySelector('.create-vcard')) {
        const vCardLinks = document.querySelectorAll('.create-vcard');

        if(vCardLinks.length > 0) {
            vCardLinks.forEach(vCardLink => {
                vCardLink.addEventListener('click', (event) => {
                    event.preventDefault();
                
                    // Get the data attributes for each vCard link
                    const firstName = vCardLink.dataset.firstname;
                    const lastName = vCardLink.dataset.lastname;
                    const email = vCardLink.dataset.email;
                    const phoneNumber = vCardLink.dataset.phone;
                
                    // Call the function to create a vCard with the data
                    createVCard(firstName, lastName, email, phoneNumber);
                });
            });
        }
    }


function createVCard(firstName, lastName, email, phoneNumber) {
    const vCardContent = `BEGIN:VCARD\nVERSION:3.0\nFN:${firstName} ${lastName}\nN:${lastName};${firstName};;\;\nEMAIL;TYPE=PREF,INTERNET:${email}\nTEL;TYPE=CELL:${phoneNumber}\nEND:VCARD`;
    const blob = new Blob([vCardContent], { type: 'text/vcard;charset=utf-8' });
    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.download = firstName + '_' + lastName + '.vcf';
    link.click();
    URL.revokeObjectURL(url);
}

Der Code ist soweit eingestellt, dass er nach DIVs mit der Klasse ".create-vcard" sucht und dann darin die data-attribute ausliest. In diesem Beispiel also "data-firstname", "data-lastname", "data-email" und "data-phone". Das sind auch die Mindestanforderungen. Natürlich kann der Code auch um "Privat-Nummer", "Festnetz", etc erweitert werden.

Damit unser JS jetzt die VCARD Links erstellt, müssen wir dazu diesen HTML Code generieren:

<a href="#" class="create-vcard" data-firstname="Marha" data-lastname="Musterfrau" data-email="martha@muster.gmbh" data-phone="+49123456789">
    VCARD Download
</a>

Nun wird eine VCARD generiert mit den Daten aus den data-Attributen.