如何保存联系方式从一个网站到android或iphone使用HTML按钮与JS或PHP集成?

我正在尝试实现一个网站的功能，这样用户就可以通过点击一个HTML按钮将联系人详细信息从网站保存到他们的手机(android/iPhone)。

这是我目前为止尝试的

<!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代码

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: "john@doe.com"
};
// create a vcard file
var vcard = "BEGIN:VCARDnVERSION:4.0nFN:" + 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";
});

为了测试的目的，我把这个上传到一个web服务器上，但是什么也没有发生。

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

你很接近了。诀窍是创建一个新的链接，并将其设置为你的东西，然后单击它:

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: "john@example.com"
};
// create a vcard file
var vcard = "BEGIN:VCARDnVERSION:4.0nFN:" + 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();
});

演示:https://codepen.io/cjhaas/pen/jOpYYvq

相关内容

最新更新

热门标签：