ajax csv 파일 다운로드

개발환경 : Spring Boot, javascript, html, jquery

 

Controller.java

import org.springframework.http.HttpHeaders;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;

public ResponseEntity<String> callListFullDownload(){
    HttpHeaders header = new HttpHeaders();
    header.add("Content-Type", "text/csv; charset=MS949");
    header.add("Content-Disposition", "attachment; filename\""+"test.csv"+"\"");

    return new ResponseEntity<String>(csvStr, header, HttpStatus.CREATED);
}

HttpHeaders 를 통해 header 설정을 한다.

csv 의 mime type 인 text/csv 와 charset 은 UTF-8 로 할 경우 깨지므로 MS949 로 설정한다.

 

Service.java

public String getCallListFullCsvDownload(DMap<String, Object> params) {
    ReporterCallListMapper mapper = sqlSession.getMapper(ReporterCallListMapper.class);

    String data = "";
    data += "사이트,날짜,시간,USID,ANI,런처타입,DNIS,마지막트레이스코드,마지막트레이스코드이름,
                    서비스이용수,상담사연결"+"\n";

    List<DMap<String, Object>> result = mapper.getCallListList(params);
    Iterator<DMap<String, Object>> i = result.iterator();

    while (i.hasNext()) {
        Map<String, Object> d = i.next();
        if(!d.isEmpty()) {
            data += d.get("site_name")+",";
            data += d.get("en_date")+",";
            data += d.get("en_time")+",";
            data += d.get("usid")+",";
            data += d.get("ani")+",";
            data += d.get("launcher_type")+",";
            data += d.get("dnis")+",";
            data += d.get("tracecode_last")+",";
            data += d.get("tracecode_name")+",";
            data += d.get("trace_count")+",";
            data += d.get("fs_flag")+"\n";
        }
    }
    return data;
}

프로젝트 진행중에 급하게 넣은거라 안보이는 데이터는 이해해주세요

csv 는 String 형태로 "," 콤마 기준으로 데이터를 넣으면 됩니다.

또한 다음줄로 가기 위해선 "\n" 값을 통해 줄이동 하면 됩니다.

 

예시)

String data = "";
data += "이름, 번호, 취미"+"\n";
data += "obo, 01000004040, 족구";

 

javascript

var xhrOverride = new XMLHttpRequest();
xhrOverride.responseType = 'arraybuffer';

$.ajax({
    url: contextPath + '/reporter/callList/full/download',
    type: 'POST',
    data: ajaxStr,
    xhr: function() {
        return xhrOverride;
    },
    success: function(response){
            console.log(response);
            const url = window.URL.createObjectURL(new Blob([response]), {
                //해당 데이터에 대한 Mime Type 지정
                target: 'text/csv'
            });
            const link = document.createElement('a');
            link.href = url;
            link.setAttribute('download', '콜리스트_조회.csv');
            document.body.appendChild(link);
            link.click();
    }
})