[jQuery] Ajax 이용한 파일 다운로드 (Chrome, Firefox, IE11 테스트완료)

이번에 jQuery를 사용하는 프로젝트를 사용하면서 Ajax 다운로드 라이브러리를 사용할까 하다가 그냥 공통파일에 구현을 했다.

크롬, 파이어폭스 익스플로러11 에서 정상적으로 동작하는것을 확인했다.
(2019.10.30)


다운로드 로직
1004lucifer

/**
 * 서버에 요청하여 파일을 다운로드 한다. (Chrome, Firefox, IE11 테스트 완료)
 * @param reqObj 요청정보 -  {
 *     url: 'url',          (required)
 *     method: 'GET|POST',  (optional - default:post)
 *     data: {              (optional)
 *         key1: value,
 *         key2: value
 *     }
 * }
 */
function requestDownloadFile(reqObj) {
    if (!reqObj || !reqObj.url) {
        return;
    }

    var isGetMethod = reqObj.method && reqObj.method.toUpperCase() === 'GET';
    $.ajax({
        url: reqObj.url,
        method: isGetMethod ? 'GET' : 'POST',
        xhrFields: {
            responseType: 'arraybuffer'
        },
        data: $.param(reqObj.data) // a=1&b=2&c=3 방식
        // data: JSON.stringify(reqObj.data) // {a:1, b:2, c:3} JSON 방식

    }).done(function(data, textStatus, jqXhr) {
        if (!data) {
            return;
        }
        try {
            var blob = new Blob([data], { type: jqXhr.getResponseHeader('content-type') });
            var fileName = getFileName(jqXhr.getResponseHeader('content-disposition'));
            fileName = decodeURI(fileName);

            if (window.navigator.msSaveOrOpenBlob) { // IE 10+
                window.navigator.msSaveOrOpenBlob(blob, fileName);
            } else { // not IE
                var link = document.createElement('a');
                var url = window.URL.createObjectURL(blob);
                link.href = url;
                link.target = '_self';
                if (fileName) link.download = fileName;
                document.body.append(link);
                link.click();
                link.remove();
                window.URL.revokeObjectURL(url);
            }
        } catch (e) {
            console.error(e)
        }
    });
}
function getFileName (contentDisposition) {
    var fileName = contentDisposition
        .split(';')
        .filter(function(ele) {
            return ele.indexOf('filename') > -1
        })
        .map(function(ele) {
            return ele
                .replace(/"/g, '')
                .split('=')[1]
        });
    return fileName[0] ? fileName[0] : null
}

해당 함수를 사용하는 코드
1004lucifer

/**
 * 다운로드 함수 사용방법
 */
requestDownloadFile({
    url: 'http://google.co.kr/download.do',
    method: 'POST',
    data: {
        a: 1,
        b: 2,
        c: 3
    }
});

참고
- https://codepen.io/chrisdpratt/pen/RKxJNo?editors=1010