Creare file VCF in Javascript

Mattepuffo's logo
Creare file VCF in Javascript

Creare file VCF in Javascript

Programmazione, Javascript - AJAX

In questo articolo vi propongo una funzione per creare un file VCF in Javascript.

Qualche nota:

  • i dati li ho messi tutti cablati nel codice, ma potete facilmente sostituirli con dati presi da pagina o da API (cosa che ho fatto in Angular)
  • l'immagine l'ho presa online, la metto dentro un tag immagine con crossorigin (sennò dava errore)
  • la stringa vcard non deve avere spazi a sinistra, sennò il VCF non esce valido

Detto ciò ecco un esempio:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8">
    <title>TEST</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

    <style></style>

    <script>
      function creaVcf() {
        const imgProfile = document.getElementById('img');

        const canvas = document.createElement("canvas");
        canvas.width = imgProfile.width;
        canvas.height = imgProfile.height;
        const ctx = canvas.getContext("2d");
        ctx.drawImage(imgProfile, 0, 0);
        const dataURL = canvas.toDataURL("image/jpeg");
        const blobImg = dataURL.replace(/^data:image\/?[A-z]*;base64,/, '');

        const makeVCardVersion = `VERSION:3.0`;
        const makeVCardInfo = `N:MIO_NOME`;
        const makeVCardName = `FN:MIO_COGNOME`;
        const makeVCardOrg = `ORG:MIA_AZIENDA`;
        const makeVCardTitle = `TITLE:MIO_RUOLO`;
        const makeVCardPhoto = `PHOTO;TYPE=JPEG;ENCODING=b:${blobImg}`;
        const makeVCardTel = `TEL;TYPE=WORK,VOICE:MIO_TELEFONO`;
        const makeVCardAdr = `ADR;TYPE=WORK,PREF:;;MIO_INDIRIZZO`;
        const makeVCardEmail = `EMAIL:MIA_EMAIL`;
        const makeVCardTimeStamp = `REV:${new Date().toISOString()}`;

        let vcard = `BEGIN:VCARD
${makeVCardVersion}
${makeVCardInfo}
${makeVCardName}
${makeVCardOrg}
${makeVCardTitle}
${makeVCardPhoto}
${makeVCardTel}
${makeVCardAdr}
${makeVCardEmail}
${makeVCardTimeStamp}
END:VCARD`;

        const file = new Blob([vcard], {type: 'text/vcard'});
        const a = document.createElement('a');
        a.href = URL.createObjectURL(file);
        a.download = 'file.vcf';
        a.click();
        URL.revokeObjectURL(a.href);
      }
    </script>

  </head>

  <body>
    <img id="img" src="https://picsum.photos/200" alt="" crossOrigin="anonymous">
    <br>
    <button type="button" onclick="creaVcf()">CREA</button>
  </body>

</html>

PS: grazie al forum.html.it per le dritte!

Enjoy!

Condividi

Commentami!