Safari downloads vcf as example.com javascript

Question

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.

This is my crappy code :)

let vCard = document.querySelector('.vcard')
let vcard_start ="BEGIN:VCARD\nVERSION:3.0\n"
let vcard_end = "END:VCARD"
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>=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("click", function(){

        const tmp = base64_image_encoded.split(",");
        
        // Generate download of vCard file with some content
        vcardReady = vcard_start+ 
                        "FN:"+fullName+ "\n" +
                        "N:" + newName + "\n" +
                        "EMAIL:" + email + "\n" +
                        "ORG:Carella, Byrne, Cecchi, Brody & Agnello, P.C\n" +
                        "ROLE:" + title + "\n" +
                        "TEL;TYPE=WORK;VOICE:" + phone + "\n" +
                        "URL:" + currentURL + "\n" + 
                        "PHOTO;TYPE=JPEG;ENCODING=BASE64:"+ tmp[1] + "\n" + 
                        "NOTE;CHARSET=us-ascii;ENCODING=QUOTED-PRINTABLE:"  + "\n" +
                        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 = "data:image/gif;base64, R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
    image.src = src;
  }
  
  return image;
}

Answer 1

I have seen this issue when there was a newline character in the filename for Safari. Removing that newline did the trick for me