[javascript] SweetAlert의 엑셀 파일 업로드 및 다운로드 기능

예제 코드에서는 SweetAlert 패키지를 사용하여 엑셀 파일의 업로드 및 다운로드 기능을 구현하는 방법에 대해 알아보겠습니다.

엑셀 파일 업로드

// 엑셀 파일 업로드 버튼 클릭 시 이벤트 처리 함수
document.getElementById('uploadBtn').addEventListener('click', function() {
  Swal.fire({
    title: '엑셀 파일 업로드',
    html: `
      <input type="file" id="fileInput">
    `,
    showCancelButton: true,
    confirmButtonText: '확인',
    cancelButtonText: '취소',
    preConfirm: function() {
      return new Promise(function(resolve, reject) {
        var fileInput = document.getElementById('fileInput');
        var file = fileInput.files[0];
        
        // 파일 유효성 검사
        if (file.type != 'application/vnd.ms-excel') {
          reject('유효한 엑셀 파일이 아닙니다.');
        }
        
        // 업로드 처리
        // ... (여기에 업로드 처리하는 로직을 작성합니다.)
        
        resolve();
      });
    }
  });
});

위 예제 코드에서는 SweetAlert의 Swal.fire() 함수를 사용하여 엑셀 파일을 업로드하는 팝업 창을 생성합니다. 팝업 창에는 파일 선택을 위한 input type="file" 요소가 포함되어 있습니다.

팝업 창에서 “확인” 버튼을 클릭하면, preConfirm 콜백 함수가 호출됩니다. 이 함수에서는 업로드할 파일의 유효성 검사를 수행한 후, 업로드 처리하는 로직을 작성하면 됩니다.

엑셀 파일 다운로드

// 엑셀 파일 다운로드 버튼 클릭 시 이벤트 처리 함수
document.getElementById('downloadBtn').addEventListener('click', function() {
  // 다운로드 처리
  // ... (여기에 다운로드 처리하는 로직을 작성합니다.)
  
  Swal.fire({
    title: '엑셀 파일 다운로드',
    text: '다운로드가 완료되었습니다.',
    icon: 'success',
    confirmButtonText: '확인'
  });
});

위 예제 코드에서는 SweetAlert의 Swal.fire() 함수를 사용하여 엑셀 파일을 다운로드하는 팝업 창을 생성합니다. 팝업 창에는 다운로드가 완료되었다는 메시지가 표시됩니다.

다운로드 처리하는 로직은 downloadBtn 버튼을 클릭했을 때 수행되어야 합니다. 이 부분에는 실제로 파일을 다운로드하는 로직을 작성하시면 됩니다.

참고 자료

위 예제 코드는 SweetAlert를 활용하여 엑셀 파일 업로드와 다운로드 기능을 구현하는 방법을 보여주는 예시입니다. 실제 코드에서는 필요에 따라 수정하여 사용하시면 됩니다.