[javascript] 파일 다운로드 - jQuery

파일 다운로드

다운로드 요청

jQuery를 사용합니다. 다운로드 요청을 위해 함수를 등록합니다. 함수명은 download로 하였습니다. 파라미터로 3가지를 넘깁니다. 요청하는 URL, 요청시 필요한 데이터, 요청 방법(get, post). form을 임시로 생성하고 submit을 통해 요청하는 방식으로 진행됩니다.

//Ajax 파일 다운로드
jQuery.download = function(url, data, method){
    // url과 data를 입력받음
    if( url && data ){ 
        // data 는  string 또는 array/object 를 파라미터로 받는다.
        data = typeof data == 'string' ? data : jQuery.param(data);
        // 파라미터를 form의  input으로 만든다.
        var inputs = '';
        jQuery.each(data.split('&'), function(){ 
            var pair = this.split('=');
            inputs+='<input type="hidden" name="'+ pair[0] +'" value="'+ pair[1] +'" />'; 
        });
        // request를 보낸다.
        jQuery('<form action="'+ url +'" method="'+ (method||'post') +'">'+inputs+'</form>')
        .appendTo('body').submit().remove();
    };
};

위 코드를 통해 함수를 설정하였고, 함수를 호출하여 다운로드를 요청합니다. 요청 방법은 전달하지 않으면 기본 값으로 post 가 설정됩니다.

// 컨트롤러에 요청한다.
var url = 'downloadUrl.do';
var params = { param1: 'data1', param2: 'data2'};
$.download('downloadUrl.do',$.param(params));

다운로드 응답

@RequestMapping(value="/downloadUrl.do")
    public void down(HttpServletResponse response) throws Exception {
    String newname = "출력파일명";
    String orgname = "c:\\test.txt"; //저장된파일

    // MIME Type 을 application/octet-stream 타입으로 변경
    // 무조건 팝업(다운로드창)이 뜨게 된다.
    response.setContentType("application/octet-stream");
   
    // 브라우저는 ISO-8859-1을 인식하기 때문에
    // UTF-8 -> ISO-8859-1로 디코딩, 인코딩 한다.
    orgname = new String(orgname.getBytes("UTF-8"), "iso-8859-1");
   
    // 파일명 지정
    response.setHeader("Content-Disposition", "attachment; filename=\""+newname +"\"");
   
    OutputStream os = response.getOutputStream();

    FileInputStream fis = new FileInputStream(orgname);
    int n = 0;
    byte[] b = new byte[512];
    while((n = fis.read(b)) != -1 ) {
        os.write(b, 0, n);
    }
    fis.close();
    os.close();
}

파라미터를 전달받아, 해당 데이터에 맞는 파일을 클라이언트에서 응답으로 보내줍니다.

참고

• http://mwmw7.tistory.com/139
• http://androphil.tistory.com/330