[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 GitHub 저장소: https://github.com/sweetalert2/sweetalert2
- File API: https://developer.mozilla.org/ko/docs/Web/API/File
- Blob API: https://developer.mozilla.org/ko/docs/Web/API/Blob
위 예제 코드는 SweetAlert를 활용하여 엑셀 파일 업로드와 다운로드 기능을 구현하는 방법을 보여주는 예시입니다. 실제 코드에서는 필요에 따라 수정하여 사용하시면 됩니다.