IE 9下載​​屬性的解決方法

Question

我想從我的web服務下載文件。我需要將複雜的元數據傳遞給服務器以瞭解如何下載文件。這裏是林如何能夠完成，在常綠的瀏覽器：

// i use angular but not important for this demo 
$http.post({ /* complex object */ }).then(xhr){ 

    // use download attribute 
    // http://davidwalsh.name/download-attribute 

    var hiddenElement = document.createElement('a'); 
    hiddenElement.href = 'data:attachment/csv,' + encodeURI(xhr.data); 
    hiddenElement.target = '_blank'; 
    hiddenElement.download = $scope.filename + '.csv'; 
    hiddenElement.click(); 
    hiddenElement.remove(); 
}); 

當然意義上的下載屬性是不可用的IE瀏覽器

我無法發佈。我以前用過的一個解決辦法是：

$("body>#download_iFrame").remove(); 
$("body").append('<iframe name="downloadFrame" id="download_iFrame" style="display:none;" src="" />'); 
$("#form-download")[0].submit(); 

，然後在HTML

<form target="downloadFrame" 
    action="'api/search/export/'" 
    id="form-download"></form> 

問題是我無法通過這樣的一個對象。當然，我可以把一個隱藏的輸入和序列化它的價值，但我的對象有點大，所以最終成爲一個問題。

你如何解決此問題？

Answer 1

如果你只關心最近的瀏覽器你可以看看使用FileSaver.js。在IE10 +上運行時，它使用navigator.msSaveOrOpenBlob。

var xhr = new XMLHttpRequest(); 
xhr.open("GET", url, true); 
xhr.responseType = "blob"; 
xhr.onload = fuction (eventInfo) { 
    if (this.status == 200) { 
     var blob = this.response; 

     // FileSaver.js usage: 
     saveAs(blob, "filename.ext"); 

     // Or IE10+ specific: 
     navigator.msSaveOrOpenBlob(blob, "filename.ext"); 
    } 
}; 
xhr.send();