javascript - 在 Internet Explorer 11 中单击链接的权限被拒绝

Question

我修改了一个现有的 AngularJS 应用程序，它通过添加一个按钮来列出客户，该按钮允许将客户信息下载为 vcard。我直接在点击时用 Javascript 创建 vcard。下载按钮在点击时以客户项目作为参数调用以下函数:

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;
}

在createVCard-function中我只是将文件内容创建为一个字符串，所以它不应该进入问题。转码由这个库完成:https://github.com/inexorabletash/text-encoding

该功能在 Firefox 和 Chrome 中没有问题，但在 IE11 中没有问题。控制台报错如下:

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

第169行是上面函数的这条指令:

document.getElementById(aId).click();

在控制台中手动输入此语句时，显示相同的错误。

我将不胜感激每一个关于原因的提示，甚至是一个好的解决方法。

编辑

更正了错误行和拼写错误。

Answer 1

您不能直接在 Microsoft IE 中打开 blob。您必须使用 window.navigator.msSaveOrOpenBlob。如果您需要的话，还有 msSaveBlob。

$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();
    }
}

最后一件事:前面的代码不能在 firefox 上运行，因为 firefox 不支持 click()。您可以使用以下代码段原型(prototype)它的行为:

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);
}