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.
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
Share Improve this question asked Jan 20, 2023 at 22:08 MateoMateo 1691 gold badge1 silver badge9 bronze badges 02 Answers
Reset to default 15You 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
You are very close. The trick is to make a new link and set that to your stuff, then click that:
<h1>My Contact</h1>
<body translate="no">
<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>
<button id="save-btn">Save Contact</button>
<script src="script.js"></script>
<script id="rendered-js">
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();
});
//# sourceURL=pen.js
</script>
</body>