IT Share you

IE11에서 createObjectURL로 만든 링크 열기

shareyou 2020. 12. 14. 21:06
반응형

IE11에서 createObjectURL로 만든 링크 열기


다음 데모에서 링크를 열 수없는 이유는 무엇입니까?
http://html5-demos.appspot.com/static/a.download.html

마우스 오른쪽 버튼을 클릭하여 새 탭 / 창에서 열 수도 없습니다. 브라우저에 사용자 지정해야하는 설정이 있습니까?


이 데모는 보안 제한으로 인해 IE에서 지원하지 않는 Blob URL을 사용합니다.

IE에는 파일을 만들고 다운로드하기위한 자체 API가 msSaveOrOpenBlob있습니다.

다음은 IE, Chrome 및 Firefox에서 작동하는 브라우저 간 솔루션입니다.

function createDownloadLink(anchorSelector, str, fileName){
    if(window.navigator.msSaveOrOpenBlob) {
        var fileData = [str];
        blobObject = new Blob(fileData);
        $(anchorSelector).click(function(){
            window.navigator.msSaveOrOpenBlob(blobObject, fileName);
            window.navigator.msSaveOrOpenBlob(blobObject, fileName);
        });
    } else {
        var url = "data:text/plain;charset=utf-8," + encodeURIComponent(str);
        $(anchorSelector).attr("download", fileName);
        $(anchorSelector).attr("href", url);
    }
}

$(function () {
    var str = "hi,file";
    createDownloadLink("#export", str, "file.txt");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="export" class="myButton" download="" href="#">export</a>


다음은 모든 파일을 blob으로 다운로드하는 기능입니다. (IE 및 비 IE에서 테스트 됨)

var download_csv_using_blob = function (file_name, content) {
    var csvData = new Blob([content], { type: 'text/csv' });
    if (window.navigator && window.navigator.msSaveOrOpenBlob) { // for IE
        window.navigator.msSaveOrOpenBlob(csvData, file_name);
    } else { // for Non-IE (chrome, firefox etc.)
        var a = document.createElement("a");
        document.body.appendChild(a);
        a.style = "display: none";
        var csvUrl = URL.createObjectURL(csvData);
        a.href =  csvUrl;
        a.download = file_name;
        a.click();
        URL.revokeObjectURL(a.href)
        a.remove();
    }
};

참고 : 필요한 경우 파일 유형을 변경하십시오.


데이터가 Ajax에서 오는 경우 다음을 추가 할 수 있습니다.

if (window.navigator.msSaveOrOpenBlob)
 xhttp.responseType = "arraybuffer";
else
 xhttpGetPack.responseType = "blob";

////////////////////////////////////////////////

var a = document.createElement("a");
document.body.appendChild(a);
a.style.display = "none";

// IE
if (window.navigator.msSaveOrOpenBlob)
{
  a.onclick = ((evx) => 
  {
      var newBlob = new Blob([new Uint8Array(xhttpGetPack.response)]);
      window.navigator.msSaveOrOpenBlob(newBlob, "myfile.ts");
  });
  a.click();
}
else //Chrome and safari
{
  var file = URL.createObjectURL(xhttpGetPack.response);
  a.href = file;
  a["download"] = "myFile.ts";
  a.click();
  window.URL.revokeObjectURL(file);
}

        //File Object return in ajax Success in data variable
         var blob = new Blob([data]);
         if (navigator.appVersion.toString().indexOf('.NET') > 0) //For IE
          {
            window.navigator.msSaveOrOpenBlob(blob, "filename.ext");
          }
          else if (navigator.userAgent.toLowerCase().indexOf('firefox') >-1) 
              {
                var link = document.createElement('a');
                link.href = window.URL.createObjectURL(blob);
                link.download = "filename.ext";
                document.body.appendChild(link);//For FireFox <a> tag event 
                //not working
                link.click();
            }
          else
          {
                var link = document.createElement('a');
                link.href = window.URL.createObjectURL(blob);
                link.download = "filename.ext" 
                link.click();
          }

참고URL : https://stackoverflow.com/questions/24007073/open-links-made-by-createobjecturl-in-ie11

반응형