Permission denied for link to link in Internet Explorer 11

Question

I modified the existing AngularJS application, which lists the clients, adding a button that allows you to download client information in the form of vcard. I create a vcard in Javascript directly on click. The download button calls the following function when clicking with the client as an argument:

function transcodeToAnsi(content){ var encoding = "windows-1252"; var nonstandard = {NONSTANDARD_allowLegacyEncoding: true}; return new TextEncoder(encoding, nonstandard).encode(content); } $scope.download = function(item) { var filename = 'contact.vcf'; var aId = "vcard"; var content = createVCard(item); var encoded = transcodeToAnsi(content); var blob = new Blob([ encoded ], { type : 'vcf' }); var url = (window.URL || window.webkitURL).createObjectURL(blob); $("body").append('<a id="' + aId + '" href="' + url + '" download=' + filename + ' class="hidden"></a>'); $timeout(function(){ document.getElementById(aId).click(); $("#" + aId).remove(); }) return false; } 

In the createVCard function, I just create the contents of the file as a String, so it should not be part of the problem. Transcoding is performed by this library: https://github.com/inexorabletash/text-encoding

The function works without problems in Firefox and Chrome, but not in IE11. The following error is displayed in the console:

 Error: Permission denied at Anonymous function (http://***/Contacts2015/js/contacts.js:169:9) at Anonymous function (http://***/static/9bojdXAkdR8XdVMdSTxZAgzEwGWhHMwgpuONdU2Y8F4.js:14305:11) at completeOutstandingRequest (http://***/static/9bojdXAkdR8XdVMdSTxZAgzEwGWhHMwgpuONdU2Y8F4.js:4397:7) at Anonymous function (http://***/static/9bojdXAkdR8XdVMdSTxZAgzEwGWhHMwgpuONdU2Y8F4.js:4705:7) undefined 

Line 169 - this function statement above:

 document.getElementById(aId).click(); 

The same error is displayed when this operator is entered manually in the console.

I would appreciate every hint of a reason and an even better workaround.

EDIT

Bug fixed and typo.

Answer 1

You cannot open drops directly in Microsoft IE. You should use window.navigator.msSaveOrOpenBlob . There is also msSaveBlob if you need it.

 $scope.download = function() { //etc... logic... var blob = new Blob([encoded], {type: 'vcf'}); //for microsoft IE if (window.navigator && window.navigator.msSaveOrOpenBlob) { window.navigator.msSaveOrOpenBlob(blob, fileName); } else { //other browsers var a = document.createElement('a'); a.style = "display:none"; a.href = URL.createObjectURL(blob); a.download = "filename.jpg"; a.click(); } } 

Last: the previous code does not work on firefox because firefox does not support click() . You can prototype execute its behavior with this snippet:

 HTMLElement.prototype.click = function() { var evt = this.ownerDocument.createEvent('MouseEvents'); evt.initMouseEvent('click', true, true, this.ownerDocument.defaultView, 1, 0, 0, 0, 0, false, false, false, false, 0, null); this.dispatchEvent(evt); }