통신값에서 받은 blob 다운로드 처리(.fetchAPI 이용)

프로젝트를 진행하면서 API통신을 이용해 BLOB값을 받아 파일을 다운로드 할 필요가 있었다.

보통 JQUERY AJAX통신을 이용하여 API를 진행하였다.

 

예를 들어 

$.ajax({
    url:'example.php' // 요청 할 주소
    async:true,// false 일 경우 동기 요청으로 변경
    type:'POST' // GET, PUT
    data: {
        Name:'ajax',
        Age:'10'
    },// 전송할 데이터
    dataType:'text',// xml, json, script, html
    beforeSend:function(jqXHR) {},// 서버 요청 전 호출 되는 함수 return false; 일 경우 요청 중단
    success:function(jqXHR) {},// 요청 완료 시
    error:function(jqXHR) {},// 요청 실패.
    complete:function(jqXHR) {}// 요청의 실패, 성공과 상관 없이 완료 될 경우 호출
});

출처: https://webinformation.tistory.com/22 [끄적끄적]

보통 이런식으로 API통신을 이용했지만

AJAX에서 BLOB를 통신하면 BLOB 값이 2배로 부풀려져서 통신되는 ERROR가 있었다.

 

 

JQUERY 3.0이상 버전에서는 xhrFields 옵션을 통해서 blob값을 정제 할 수 있다고 하는데 프로젝트에서 사용하고 있는 버전은 1.대 버전이다...... 해결책으로는 javascript에 있는 xhr 통신을 이용하라는 답변이 많았지만, 옛날 방식의 통신을 진행하고 싶지 않았다.

 

jQuery.ajax({
            url:'https://images.unsplash.com/photo-1465101108990-e5eac17cf76d?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ%3D%3D&s=471ae675a6140db97fea32b55781479e',
            cache:false,
            xhrFields:{
                responseType: 'blob'
            },
            success: function(data){
                var img = document.getElementById('img');
                var url = window.URL || window.webkitURL;
                img.src = url.createObjectURL(data);
            },
            error:function(){
                
            }
        });

 

그래서 찾은게 FEATCH API 통신.

 

사용법은 대충 이러하다.

function postData(url = '', data = {}) {
  // Default options are marked with *
    return fetch(url, {
        method: 'POST', // *GET, POST, PUT, DELETE, etc.
        mode: 'cors', // no-cors, cors, *same-origin
        cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
        credentials: 'same-origin', // include, *same-origin, omit
        headers: {
            'Content-Type': 'application/json',
            // 'Content-Type': 'application/x-www-form-urlencoded',
        },
        redirect: 'follow', // manual, *follow, error
        referrer: 'no-referrer', // no-referrer, *client
        body: JSON.stringify(data), // body data type must match "Content-Type" header
    })
    .then(response => response.json()); // parses JSON response into native JavaScript objects
}

프라미스가 내장되어있어서 then, catch 문법 사용이 가능하다/

 

 

fetch(myRequest)
.then(response => response.blob())
.then(function(myBlob) {
  var objectURL = URL.createObjectURL(myBlob);
  myImage.src = objectURL;
});

상황에 맞게 통신을 하고 response.blob() 를 하면 blob를 제대로 return 받을 수 있다.

 

뭐 blob로 파일을 다운로드 받는 방법은 아래와 같이 a태그를 선언 후 blob파일을 url로 뜬다음 a태그를 클릭시키면 된다. 데이터가 문제인가 괜히 엉뚱한데서 고민하느라 하루정도 시간이 걸렸다. jquery 젠장...

 

이제 되도록 fetch api를 사용하여 개발을 해야겠다.

아 맞다 내가 쓴 api는 이상하게 json 형태로 값을 넘기는게 아니라 쿼리스트링 형태로 값을 넘겨줘야 응답을 했다.

var a = document.createElement("a");
var url = URL.createObjectURL(reponse)
a.href = url;
a.download = filename;
document.body.appendChild(a);
a.click();
window.URL.revokeObjectURL(url);