파일 다운로드(Ajax 통신)

var fileId = $("#btnFileDownload").data("no"); 

-> 'btnFileDownload'라는 ID를 가진 요소의 'data-no' 속성 값을 가져옴. 
이 값은 fileId 변수에 저장.


var filename = $("#fileDownloadForm input[name='filename']").val();

->'fileDownloadForm'라는 ID를 가진 요소 안의 'filename'이라는 name 속성을 가진 input 요소의 값을 가져옴. 
이 값은 filename 변수에 저장.


if (confirm("다운로드 하시겠습니까?")) {

-> 사용자에게 확인 메시지를 표시하고, 
'확인' 또는 '취소' 버튼 중 하나를 클릭할 때까지 기다리는 코드. 
'확인' 버튼을 클릭하면 true를 반환하고, 
'취소' 버튼을 클릭하면 false를 반환. 
이 코드는 '확인' 버튼을 클릭했을 때만 { ... } 안의 코드를 실행.


$.ajax({
    type: 'GET',
    url: `/downloadFile/${fileId}`, 

-> $.ajax({ ... })는 jQuery를 이용해 AJAX 요청을 보내는 메서드. 
type: 'GET'은 GET 방식을 이용해 요청을 보낸다는 것을 나타내며, 
url: /downloadFile/${fileId}``는 요청을 보낼 URL을 나타냄. 
       
    
    xhrFields: {
        responseType: 'blob'
    },
    

xhrFields는 AJAX 요청의 XMLHttpRequest 객체에 직접 설정할 값을 지정하는 데 사용됨. 
이 객체는 서버와의 HTTP 요청을 생성, 전송 및 처리하는 데 사용.


responseType: 'blob'은 XMLHttpRequest 객체의 responseType 속성을 'blob'으로 설정함. 
responseType 속성은 서버에서 반환되는 데이터의 타입을 정의. 
'blob'은 바이너리 데이터를 나타내며, 대용량 파일을 처리하는 데 주로 사용.


이 설정을 사용하면, 서버에서 반환되는 응답이 Blob 객체로 처리. 
Blob 객체는 변하지 않는 불변의 데이터를 나타내며, 보통 파일 내용을 나타내는 데 사용. 
이렇게 하면, 서버에서 반환된 파일 내용을 클라이언트에서 사용할 수 있게됨.

이 설정은 파일을 다운로드하는 AJAX 요청에서 주로 사용됨. 
서버에서 파일 내용을 Blob 객체로 반환하면, 
이 Blob 객체를 사용하여 클라이언트에서 파일을 생성하고 다운로드할 수 있음. 

이는 위의 코드에서 
xhrFields: { responseType: 'blob' }는 서버로부터의 응답을 Blob 객체로 받겠다는 것을 설정.


success: function(blob) {
    var link = document.createElement('a');
    link.href = window.URL.createObjectURL(blob);
    link.download = filename; 
    link.click();
    console.log("파일 다운로드 성공");
},

-> success: function(blob) { ... }는 AJAX 요청이 성공했을 때 호출되는 콜백 함수. 
blob은 서버로부터 받은 응답. 

document.createElement('a')는 'a' 요소를 새로 만들고, 
link.href = window.URL.createObjectURL(blob);는 이 요소의 href 속성을 Blob 객체의 URL로 설정. 

link.download = filename;는 다운로드될 파일의 이름을 설정하고, 

link.click();는 'a' 요소의 클릭 이벤트를 발생시켜 파일 다운로드를 시작함.

전체코드

	$('#btnFileDownload').click(function(e) {
    e.preventDefault();
	console.log("파일다운로드 ajax 호출");
	var fileId = $("#btnFileDownload").data("no"); // 'data-no' 속성의 값을 가져옴
	var filename = $("#fileDownloadForm input[name='filename']").val();
	// var fileId = $("#fileDownloadForm button[name='fileId']").val();
	    if (confirm("다운로드 하시겠습니까?")) {
	       $.ajax({
			    type: 'GET',
			    url: `/downloadFile/${fileId}`, // fileId 변수를 URL에 포함
			    xhrFields: {
			        responseType: 'blob' // 응답을 Blob 객체로 받음
			    },
			    success: function(blob) {
			        var link = document.createElement('a');
			        link.href = window.URL.createObjectURL(blob);
			        link.download = filename; // 다운로드시 저장되어 있는 파일이름으로 기본 다운로드 설정
                link.click();
                console.log("파일 다운로드 성공");
            },
			    error: function() {
			        alert('파일 다운로드에 실패했습니다.');
			    }
			});

	    }
	});