[javascript] CSV 형태의 대량 데이터 다운 크롬 브라우저 이슈 Blob 사용

크롬 보안이슈로 인하여 대량 데이터를 내려받을때 네트워크 오류가 생긴다.

이에 대해 해결하려면 아래와 같이 코드를 작성하자. (Blob 를 사용)

[샘플 데이터]

seq,cate_mst_cd,partner_id,wmp_vendor_id,category1,category2,category3,category4,use_yn

483,00300500C2DA968,4,WMP_tOV3ybegFU,"리빙","가구","소파","패브릭소파",Y

484,00300500C2DA968,9,WMPWcEbI5hvVif,"가구/침구/인테리어","거실/침실가구","소파","패브릭소파",Y

485,00300500C2DA968,10,WMPEJXJQFPlG0C,"가구","소파/거실가구","소파/디자인체어","패브릭소파(1인용)",Y

486,00300500C2DA968,10,WMPEJXJQFPlG0C,"가구","소파/거실가구","소파/디자인체어","패브릭소파(2-3인용)",Y

487,00300500C2DA968,10,WMPEJXJQFPlG0C,"가구","소파/거실가구","소파/디자인체어","패브릭소파(23인용)",Y

488,00300500C2DA968,10,WMPEJXJQFPlG0C,"가구","소파/거실가구","소파/디자인체어","패브릭소파(4인이상)”,Y 

데이터를 받아온 객체를 response.data 이라고 하면 아래와 같이 Blob 객체를 활용하여 다운로드 스크립트를 작성하자.

var blob = new Blob([ response.data ], {
    type : "application/csv;charset=utf-8;"
});

// FOR OTHER BROWSERS
var csvUrl = URL.createObjectURL(blob);

var hiddenElement = document.createElement('a');
hiddenElement.href = csvUrl;
hiddenElement.target = '_blank';
hiddenElement.download = 'category.csv';
hiddenElement.click();