심재운 블로그

javascript 로 파일 다운로드 처리하기 (javascript file download)

자바스크립트 만으로 파일을 다운로드 하는 방법을 찾긴 했는데, IE 및 EDGE 브라우저에서 새창 띄우는 부분이 조금 이슈가 있네요.

PC 환경의 크롬에서는 잘 되고 있는것을 확인했습니다. 모바일 기기 환경에서는 안되니 참고하시기 바랍니다.

참고 사이트 : http://fil.wo.tc/742

var browserName = undefined;
var userAgent = navigator.userAgent;

switch (true) {
    case /Trident|MSIE/.test(userAgent):
        browserName = 'ie';
        break;

    case /Edge/.test(userAgent):
        browserName = 'edge';
        break;

    case /Chrome/.test(userAgent):
        browserName = 'chrome';
        break;

    case /Safari/.test(userAgent):
        browserName = 'safari';
        break;

    case /Firefox/.test(userAgent):
        browserName = 'firefox';
        break;

    case /Opera/.test(userAgent):
        browserName = 'opera';
        break;

    default:
        browserName = 'unknown';
}


//ie 브라우저 및 EDGE 브라우저 
if (browserName == 'ie' || browserName == 'edge') {

    //ie11
    var _window = window.open(url, "_blank");
    _window.document.close();
    _window.document.execCommand('SaveAs', true, "file.hwp" || url)
    _window.close();
} else {

    //chrome
    var filename = url.substring(url.lastIndexOf("/") + 1).split("?")[0];
    var xhr = new XMLHttpRequest();
    xhr.responseType = 'blob';
    xhr.onload = function () {
        var a = document.createElement('a');
        a.href = window.URL.createObjectURL(xhr.response); // xhr.response is a blob
        a.download = filename; // Set the file name.
        a.style.display = 'none';
        document.body.appendChild(a);
        a.click();
        delete a;
    };
    xhr.open('GET', url);
    xhr.send();
}