自動儲存vCards-js到iPhone和Android聯絡人的方法

Question

我正在嘗試在用戶手機（IOS 和 ANDROID）上儲存電子名片。我正在使用這段程式碼

window.addEventListener("load", function () {
  // Contact Information
  var contact = {
    ...
  };
  // create a vcard file
  var vcard = "BEGIN:VCARD\nVERSION:3.0\n"
    + "N:" + contact.name + ";;;\n"
    + "FN:" + contact.name + "\n"
    + "TEL;CELL:" + contact.phone + "\n"
    + "TEL;CELL:" + contact.mobile + "\n"
    + "EMAIL;HOME:" + contact.email + "\n"
    + "ADR;HOME:" + contact.address + "\n"
    + "ORG;WORK:" + contact.organization + "\n"
    + "TITLE:" + contact.title + "\n"
    + "URL:" + contact.url + "\n"
    + "NOTE:" + contact.notes + "\n"
    + "END:VCARD";  
  
  // 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();

  // window.close();
});

它可以工作，但 Android 手機上的此程式碼首先下載 vcard，然後用戶需要點擊下載才能匯入。我想要的是，當用戶進入此頁面時，我的聯絡人會自動儲存在 Android 上，而無需下載任何檔案。 （在 IOS 上這不是問題，因為當使用者造訪此網站時，他們會自動重定向以匯入聯絡人）

注意： 我之前已經播過一個有二維碼的範例。當我掃描二維碼時，他們將我重定向到導入聯絡人，我需要做的只是在手機上單擊 save

當單擊 vCard 選項卡時，我想要與 https://www.qr-code-generator.com 相同的東西。但是當頁面重新載入時，不掃描二維碼

Answer 1

您需要新增一個web share API的方法，根據您的程式碼，您可以新增navigator.share()，條件如if檢查此API是否瀏覽器支持，則會自動下載其他下載連結。

就像下面更新的程式碼一樣：-

window.addEventListener("load", function () {
  // Contact Information
  var contact = {
    ...
  };
  // create a vcard file
  var vcard = "BEGIN:VCARD\nVERSION:3.0\n"
    + "N:" + contact.name + ";;;\n"
    + "FN:" + contact.name + "\n"
    + "TEL;CELL:" + contact.phone + "\n"
    + "TEL;CELL:" + contact.mobile + "\n"
    + "EMAIL;HOME:" + contact.email + "\n"
    + "ADR;HOME:" + contact.address + "\n"
    + "ORG;WORK:" + contact.organization + "\n"
    + "TITLE:" + contact.title + "\n"
    + "URL:" + contact.url + "\n"
    + "NOTE:" + contact.notes + "\n"
    + "END:VCARD";  
  
  // 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);
  
  if (navigator.share) {
  
    navigator.share({
    
      title: 'New Contacts',
      text: 'Save contacts',
      files: [new File([blob], 'newcontact.vcf', { type: 'text/vcard' })],
    }).then(() => { });

  } else {
      const newLink = document.createElement('a');
      newLink.download = contact.name + ".vcf";
      newLink.textContent = contact.name;
      newLink.href = url;

      newLink.click();

      // window.close();
  
  }
});