Downloading VCF file on iPhone browser

I am trying to download a vcf file in my mobile web app, without hitting the server.

 function downloadVcf(filename, data) {
    var element = document.createElement('a');
    element.setAttribute('href', 'data:text/x-vcard;charset=utf-8,' + encodeURIComponent(data));
    element.setAttribute('download', filename);

    element.style.display = 'none';
    document.body.appendChild(element);

    element.click();

    document.body.removeChild(element);
  }

The code above works very well while debugging on chrome browser with windows OS. Also it works perfectly fine on chrome browser on android phones. But it does not work on iPhone browser (safari). Instead of downloading the vcf file it opens the VCF file in browser. But it does have option for user to import it to other apps (contacts for instance). But what I want is to download the VCF file in user's iPhone.

Please help.

Setting document.location.href to the value of your data URI should work:

function downloadVcf(data) {

    // build data url
    var url = 'data:text/x-vcard;charset=utf-8,' + encodeURIComponent(data);

    // ask the browser to download it
    document.location.href = url;
}