jquery.filedownload.js 파일 한글깨짐 현상

 

jquery.fileDownload.js 라이브러리를 사용해서 파일다운로드시에

이런식으로 파일이 깨지는 현상이 발견됨.

 

참고로 해당 라이브러리는

 

            } else {

                //create a temporary iframe that is used to request the fileUrl as a GET request
$iframe = $("<iframe style='display: none' src='"+fileUrl+"'></iframe>").appendTo("body");
            }

        } else {

 

이런식으로 iframe에 fileUrl값을 줘서 파일다운로드 하는 형식

 

결론은 프론트 라이브러리는 문제없음.

 

백엔드에서 파일명을 content-disposition을 사용해서 인코드 처리를 해줘야 함.

String title = "파일명";
title = URLEncoder.encode(title, "UTF-8");  //이 부분 필수 

response.setHeader("Content-Disposition", String.format("attachment;filename=%s", title)); // 파일명 명시

 

URLEncoder.encode를 안해줘도 디버깅 해보면 한글로 나와서 문제가 없어보이는데

꼭 한글은 인코딩해서 프론트로 보내줘야 깨지지 않음.

Content-Disposition

일반적인 HTTP 응답에서 Content-Disposition 헤더는 컨텐츠가 브라우저에 inline 되어야 하는 웹페이지 자체이거나 웹페이지의 일부인지, 아니면 attachment로써 다운로드 되거나 로컬에 저장될 용도록 쓰이는 것인지를 알려주는 헤더입니다.

multipart/form-data 본문에서의 Content-Disposition 일반 헤더는 multipart의 하위파트에서 활용될 수 있는데, 이 때 이 헤더는 multipart 본문 내의 필드에 대한 정보를 제공합니다. multipart의 하위파트는 Content-Type 헤더에 정의된 boundary 구분자에 의해 구분되며, Content-Disposition 헤더를 multipart 자체에 사용하는 것은 아무런 효과를 발휘하지 못합니다.

Content-Disposition 헤더는 광의의 MIME 맥락 속에서 정의되었는데, 그 정의에서 사용되는 파라미터 중 일부인 form-data, name 그리고 filename만이 HTTP forms와 POST 요청에 적용될 수 있습니다. 여기서 name과 filename은 필수적인 파라미터는 아닙니다.

 

참고 url : https://oingdaddy.tistory.com/449

파일 다운로드 시 Content-Disposition 한글 파일 이름 깨지는 오류 조치