6

我通过添加一个按钮来修改现有的AngularJS应用程序,该应用程序列出客户,该按钮允许将客户信息作为电子名片下载。我通过点击直接在Javascript中创建vcard。下载按钮调用点击与客户项目下面的函数作为参数:在Internet Explorer 11中单击链接的权限被拒绝

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功能我刚刚创建该文件的内容作为一个字符串,因此它不应该进入的问题。代码转换由此库完成: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(); 

同样的错误,当该语句手工输入在控制台中。

我会很感激每个提示的原因,甚至更好的解决方法。

EDIT

校正的误差行和错字。

+0

这是因为你的附加'aId'链接到DOM可能是一个问题 - 这可能是因为它是不知道如何再次将其删除。我建议看看去除DOM附加元素,也许这会有所帮助。 – Forest

+0

@Furze对不起,我的错。我打印了错误的一行......我改变了它。 –

+0

尝试将'document.getElementById(aId).click();'改为'$(“#”+ aId).trigger(“click”);'。 – Forest

回答

12

您不能直接在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); 
} 
+0

谢谢一堆。这样做! –

+0

谢谢!我一直在试图解决类似的问题几个小时。为了让你知道,从现在的版本5开始,firefox已经支持HTMLElement上的.click方法。 –