[jQuery] ajax로 window.location.href = "CSV 파일 다운로드" 구현

2023-06-06


사진: Unsplash 의 Marina Reich


1. 방법

 

한글 인코딩 필요 없는 경우는 아래와 같이

 

$.ajax({
  url: downloadUrl,
  method: "GET",
  dataType: "text",
  success: function(response) {
    // 텍스트 응답을 받았을 때 실행되는 코드
    // response 변수에는 텍스트 데이터가 들어있습니다.

    // 파일 다운로드를 위한 Blob 객체 생성
    var blob = new Blob([response], { type: "text/csv;charset=utf-8;" });

    // 파일 다운로드 링크 생성
    var downloadLink = document.createElement("a");
    downloadLink.href = URL.createObjectURL(blob);
    downloadLink.download = "excel_personal_data.csv";

    // 다운로드 링크를 클릭하여 파일 다운로드
    document.body.appendChild(downloadLink);
    downloadLink.click();
    document.body.removeChild(downloadLink);
  },
  error: function(xhr, status, error) {
    // 오류 처리 코드
  }
});

한글 인코딩이 필요할 경우 아래와 같이 구현하면 된다.

 

$.ajax({
  url: downloadUrl,
  method: "GET",
  dataType: "text",
  success: function(response) {
    // 텍스트 응답을 받았을 때 실행되는 코드
    // response 변수에는 텍스트 데이터가 들어있습니다.

    // 파일 다운로드를 위한 Blob 객체 생성
    var blob = new Blob(["\uFEFF" + response], { type: "text/csv;charset=utf-8;" });

    // 파일 다운로드 링크 생성
    var downloadLink = document.createElement("a");
    downloadLink.href = URL.createObjectURL(blob);
    downloadLink.download = "excel_personal_data.csv";

    // 다운로드 링크를 클릭하여 파일 다운로드
    document.body.appendChild(downloadLink);
    downloadLink.click();
    document.body.removeChild(downloadLink);
  },
  error: function(xhr, status, error) {
    // 오류 처리 코드
  }
});

메인 이미지 출처 : 사진: UnsplashMarina Reich