How to save contact details from a website to an android or iphone using HTML button with JS or PHP-CodePudding

I'm trying to implement a functionality in a website so a user can save the contact details from a website to their phone (android/iPhone) by clicking on an HTML button.

This is what I tried so far

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button id="save-btn">Save Contact</button>


  <script src="script.js"></script>
</body>

</html>

JavaScript Code

var saveBtn = document.getElementById("save-btn");
saveBtn.addEventListener("click", function () {
  // Get the contact information from the website
  var contact = {
    name: "John Doe",
    phone: "111551144111",
    email: "[email protected]"
  };
  // create a vcard file
  var vcard = "BEGIN:VCARD\nVERSION:4.0\nFN:"   contact.name   "\nTEL;TYPE=work,voice:"   contact.phone   "\nEMAIL:"   contact.email   "\nEND:VCARD";
  var blob = new Blob([vcard], { type: "text/vcard" });
  var url = URL.createObjectURL(blob);
  saveBtn.href = url;
  saveBtn.download = contact.name   ".vcf";
});

For testing purpose, I uploaded this on a webserver but nothing is happening.

https://cheery-taiyaki-477ee0.netlify.app

CodePudding user response：

You are very close. The trick is to make a new link and set that to your stuff, then click that:

var saveBtn = document.getElementById("save-btn");
saveBtn.addEventListener("click", function () {
  // Get the contact information from the website
  var contact = {
    name: "John Smith",
    phone: "555-555-5555",
    email: "[email protected]"
  };
  // create a vcard file
  var vcard = "BEGIN:VCARD\nVERSION:4.0\nFN:"   contact.name   "\nTEL;TYPE=work,voice:"   contact.phone   "\nEMAIL:"   contact.email   "\nEND:VCARD";
  var blob = new Blob([vcard], { type: "text/vcard" });
  var url = URL.createObjectURL(blob);
  
  const newLink = document.createElement('a');
  newLink.download = contact.name   ".vcf";
  newLink.textContent = contact.name;
  newLink.href = url;
  
  newLink.click();
});

Demo: https://codepen.io/cjhaas/pen/jOpYYvq