이번에 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
