VCF file creation and download

Ask the community
,
1

Hi community!
I’m new to WIX Velo and trying to write a code that creates a VCF file and then lets the user download it by clicking a button. Currently, I’m stuck with the following code version below that creates a VCF file (checked it in the console) but didn’t run the download function:

import VCard from 'vcard-creator';
import { saveAs } from 'file-saver';

function createAndDownloadVCF() {
  // Create the VCard dataconst card = new VCard();
  card.addName('Doe', 'John');
  card.addPhoneNumber('123-456-7890', 'WORK');

  // Convert the VCard data to a Blob objectconst blob = new Blob([card.toString()], { type: 'text/vcard' });

  // Save the Blob object as a filesaveAs(blob, 'contact.vcf');

  // Log the full VCard data to the consoleconsole.log(card.toString());
}

$w('#downloadButton').onClick(() => {
  createAndDownloadVCF();
});

Can anyone suggest what might be done to fix it?
Big thanks in advance!
I’ve also tried using the ‘window’ and ‘document’ objects to run the VCF file download and used the code below but always have an error: Unhandled Promise Rejection: ReferenceError: Can’t find variable: window/document

2

Example of the code I mentioned above

import vCard from 'vcf';
import { saveAs } from 'file-saver';
import wixLocation from 'wix-location';

// Define a function to create the VCF file
async function createVCF() {
  // Create the VCard data
  const card = new vCard();
  card.firstName = 'John';
  card.lastName = 'Doe';
  card.email = 'john.doe@example.com';
  card.phone = '123-456-7890';

  // Convert the VCard data to a Blob object
  const blob = new Blob([card.toString()], { type: 'text/vcard;charset=utf-8' });

  // Return the Blob object
  return blob;
}

// Add an event listener to the button
$w('#button2').onClick(async () => {
  // Create the VCF file
  const blob = await createVCF();

  // Save the VCF file using the file-saver library
  saveAs(blob, 'contact.vcf');

  // Get the URL of the Blob object
  const blobUrl = URL.createObjectURL(blob);

  // Open the URL in a new window
  window.open(blobUrl, '_blank');

  // Redirect the user to the VCF file using Wix Location
  wixLocation.to(blobUrl);
});
3

Hi Yury

Looks interesting. Does it work for you now? And does the last post show the solution?

What exactly is behind the lines:

import vCard from ‘vcf’;
import { saveAs } from ‘file-saver’;

Do I have to add some specific js-file “vCard” and “saveAs”?

4

Looks like the POST-OPENER used some NPM-Packages, which he had installed before and imported them into his running code.