익스플로러에서 간단한 파일다운로드 기능

 

 

익스플로러를 쓰는 인구의 비중이 아마도..우라니라만 무지 높을 것 같다.

공공기관을 가보면 대부분의 실무자들이 익스플로러만 쓴다....엣지는요..?ㅠㅠ

​

크롬, 파폭, 엣지에서 잘 되던 기능이 익스플로러만 가면 안되는 경우가 너무나도 많으며...특히 HTML5에서 태그들의 좋은 속성이 잘 안되는 경우가 허다 하다.

​

특히..a테그의 download 기능은 무척이나 편리해서...서버에서 따로 작업을 안해도 간단한 파일 따위는 브라우저가 알아서 파일 다운로드를 하게 해주는데..

문제는 익스플로러에서는 이 download 속성이 지원되지 않는 것이다.

​

그러면 서버에서 응답하는 프로세스를 만들어야하는데..무척이나 귀찮고 하기 싫은 일이다.

자바스크립트에서는 navigator객체를 통해서 여러 기능을 지원하고 있다.

브라우저 종류확인, 스트림확인 등 안내역할을 하는데..해당 기능 중 save or open 이라는 이름을 가진 메소드가 존재한다. 해당 메소드를 사용하면 간단하게 파일다운로드 기능구현이 가능하다.

function simpleDownloader(url){
    $.post(url,
        {param: "value"},   // 요청할 변수들
            function (data) {                      //성공콜백
                var BOM = "\uFEFF";                        //엑셀바이트 순서표시
                if (navigator.msSaveBlob) {                //익스플로러면..
                    var blobObject = new Blob([BOM + data], {type: ' type: "text/plain; charset=utf-8"'});
                    window.navigator.msSaveOrOpenBlob(blobObject, "test.txt");
                }
                else {                                     // 익스아니면
                    var a = window.document.getElementById("다운로드용A테그");
                    a.setAttribute('href', 'data:text/plain; charset=utf-8,' + encodeURIComponent(BOM + data));
                    a.setAttribute('download', url);
                    a.click();
                }
            }).fail(function () {
            console.log('post error')
    });		
}

일반 ajax로 구현해도 상관없다.

공통 스크립트에 추가해서 사용하면 끝.