create downloable file for mobile and desktop

Question

I want to create a vCard in the frontend and to make it downloadable (by clicking a button) in a ReactJs Project. I use a NodeJS module called vcards-js that creates a string with the content of the desired vCard (v3.0). The thing I am struggling with is to make it downloadable (as .vcf file).

here is my code

const {fname,lname,phoneNumber,email,organisation,title}=req.body
  
const mycard=vcard()

mycard.firstName=fname

mycard.lastName=lname

mycard.phoneNumber=phoneNumber

mycard.email=email

mycard.organisation=organisation

mycard.title=title

// enter code here

console.log(mycard.getFormattedString(),"utf-8")

after console.log() i get vcard format data but how to get it downloadable ; pls write the steps

score 1 · Answer 1 · answered Dec 02 '21 at 15:09

I think your questions is answered here. To translate this answer to your example, it would be something like this:

    var textFile = null,
      makeTextFile = function (text) {
        var data = new Blob([text], {type: 'text/plain'});

        // If we are replacing a previously generated file we need to
        // manually revoke the object URL to avoid memory leaks.
        if (textFile !== null) {
          window.URL.revokeObjectURL(textFile);
        }

        textFile = window.URL.createObjectURL(data);

        // returns a URL you can use as a href
        return textFile;
      };

// -------------

    var create = document.getElementById('create');

    create.addEventListener('click', function () {
    var link = document.createElement('a');
    link.setAttribute('download', 'XXXXX.vcf' /* set your vcf name here*/);
    link.href = makeTextFile(
           mycard.getFormattedString()
    );
    document.body.appendChild(link);

    // wait for the link to be added to the document
    window.requestAnimationFrame(function () {
      var event = new MouseEvent('click');
      link.dispatchEvent(event);
      document.body.removeChild(link);
    });

  }, false);

As I am using reactjs so getting error document is not defined any solution — ramanjeet singh, Dec 02 '21 at 15:41
I assume that you are using a ServerSideRendering and therefore get an error. see here https://stackoverflow.com/questions/54256521/react-ssr-document-is-not-defined — Rupert Eisl, Dec 02 '21 at 15:47

score 0 · Answer 2 · answered Dec 02 '21 at 14:44

I have not used vcard.js myself but by reading the README at github (https://github.com/enesser/vCards-js#on-the-web) you only redirect the user to the url of the endpoint where you generate the vcard. Something like this:

Nodejs:

var express = require('express');
var router = express.Router();

module.exports = function (app) {
  app.use('/vcard', router);
};

router.get('/', function (req, res, next) {
    var vCardsJS = require('vcards-js');
    var vCard = vCardsJS();

    // Create your vcard here

    res.send(vCard.getFormattedString());
});

Front end:

window.location = "/vcard"

create downloable file for mobile and desktop

2 Answers2