title: Safari downloads vcf as example.com javascript
body: <p>I am trying to generate a vCard .vcf file and download it on click. It works perfectly for all browsers except Safari. On safari, it downloads example.com instead of the proper file. I read a lot about the Safari download attribute issue, but it seems this is not the problem in my case. Any help would be highly appreciated.</p>
  <p>This is my crappy code :)</p>
  <pre><code>let vCard = document.querySelector('.vcard')
  let vcard_start =&quot;BEGIN:VCARD\nVERSION:3.0\n&quot;
  let vcard_end = &quot;END:VCARD&quot;
  let fullName = document.querySelector('#fullname').innerText
  //let firstName = document.querySelector('#firstname').innerText
  //let lastName =  document.querySelector('#lastname').innerText
  let title = document.querySelector('#title').innerText
  let email = document.querySelector('#email').innerText
  let phone = document.querySelector('#phone').innerText
  let address = document.querySelector('#address').innerText
  let vcard_download = document.querySelector('#vcard-download')
  let currentURL = window.location.href 
  let attPhoto = document.querySelector('#att_image')
  let attPhotoSRC = attPhoto.querySelector('img').src
  let splitName = fullName.split(' ')
  //let vCardPhoto = 
  //const space = split(/\r?\n/);
  let vcardReady
  let newName
  
      if(splitName.length&gt;=3){
         newName = splitName[2] + ';' + splitName[0] + ' ' + splitName[1]
      }else{
              newName = splitName[1] + ';' + splitName[0]
          }
  
      function download(filename, text) {
      var element = document.createElement('a');
      element.setAttribute('href','data:text/vcard;charset=utf-8,' + encodeURIComponent(text));
      element.setAttribute('download', filename);
          
      element.style.display = 'none';
      document.body.appendChild(element);
  
      element.click();
  
      document.body.removeChild(element);
  }
            
  
  let base64_image_encoded;
  
  window.addEventListener('load',function(){
      // Start file download.
      vcard_download.addEventListener(&quot;click&quot;, function(){
  
          const tmp = base64_image_encoded.split(&quot;,&quot;);
          
          // Generate download of vCard file with some content
          vcardReady = vcard_start+ 
                          &quot;FN:&quot;+fullName+ &quot;\n&quot; +
                          &quot;N:&quot; + newName + &quot;\n&quot; +
                          &quot;EMAIL:&quot; + email + &quot;\n&quot; +
                          &quot;ORG:Carella, Byrne, Cecchi, Brody &amp; Agnello, P.C\n&quot; +
                          &quot;ROLE:&quot; + title + &quot;\n&quot; +
                          &quot;TEL;TYPE=WORK;VOICE:&quot; + phone + &quot;\n&quot; +
                          &quot;URL:&quot; + currentURL + &quot;\n&quot; + 
                          &quot;PHOTO;TYPE=JPEG;ENCODING=BASE64:&quot;+ tmp[1] + &quot;\n&quot; + 
                          &quot;NOTE;CHARSET=us-ascii;ENCODING=QUOTED-PRINTABLE:&quot;  + &quot;\n&quot; +
                          vcard_end;
                                      
          var text = vcardReady;
          var filename = fullName+'.vcf';
      
          download(filename, text);
      });
      
      toDataURL(attPhotoSRC, function (dataUrl) {
          base64_image_encoded = dataUrl;
      });
      
  });
  
  function toDataURL(src, callback, outputFormat) {
    let image = new Image();
    image.crossOrigin = 'Anonymous';
    image.onload = function () {
      let canvas = document.createElement('canvas');
      let ctx = canvas.getContext('2d');
      let dataURL;
      canvas.height = this.naturalHeight;
      canvas.width = this.naturalWidth;
      ctx.drawImage(this, 0, 0);
      dataURL = canvas.toDataURL(outputFormat);
      callback(dataURL);
    };
    image.src = src;
    if (image.complete || image.complete === undefined) {
      image.src = &quot;data:image/gif;base64, R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==&quot;;
      image.src = src;
    }
    
    return image;
  }
  </code></pre>