https://rakaso598.github.io/xlsxGenerator/
Excel 파일 다운로드
Excel 파일 제작하기 각 행은 줄 바꿈으로 구분하고, 열은 쉼표로 구분하세요. Excel 다운로드
rakaso598.github.io
자바스크립트 공부 중 CSV라는 데이터 포맷에 대해 알게 되었고, 이를 활용하여 파일을 제작하고 다운로드하는 기능을 만들 수 있을 것이라는 아이디어를 떠올렸습니다. CSV 포맷은 데이터를 콤마로 구분하는 간단하고 직관적인 방식으로, 이를 자바스크립트에서 처리하는 것은 비교적 용이한 작업이라고 예상했습니다. 자바스크립트는 이미 강력한 JSON 파싱 및 직렬화 기능을 갖추고 있어, 문자열을 다루는 함수 구현에 있어 충분한 기반을 제공하고 있었기 때문입니다.
이러한 배경을 바탕으로, 사용자로부터 입력 받은 데이터를 CSV 파일로 변환하는 프로토타입을 제작한 뒤, 이를 발전시켜 브라우저에서 다운로드할 수 있는 .xlsx 엑셀 파일로 내보내는 기능을 추가했습니다. 최종적으로, 이 사이트를 GitHub Pages에 배포하여, 사용자가 엑셀 파일을 다운로드할 수 있는 웹 애플리케이션을 구현할 수 있었습니다.
추가적인 설명:
- CSV 포맷: CSV는 데이터를 텍스트 파일로 간단하게 저장할 수 있는 방법으로 널리 사용됩니다. 특히 엑셀 파일을 다룰 때 유용하게 사용됩니다.
- 자바스크립트의 역할: 자바스크립트는 문자열을 다루는 데 강력한 기능을 제공하여 CSV 형식의 데이터를 쉽게 처리하고, 이를 엑셀 파일로 변환할 수 있었습니다.
- GitHub Pages 배포: GitHub Pages를 통해 사이트를 간단히 배포하여 사용자가 엑셀 파일을 다운로드할 수 있도록 했습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Excel 파일 다운로드</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.2/xlsx.full.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
background-color: #ffffff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 500px;
}
h1 {
text-align: center;
margin-bottom: 20px;
}
.input-container {
margin-bottom: 15px;
}
.input-container label {
font-size: 16px;
display: block;
margin-bottom: 5px;
}
.input-container textarea {
width: 100%;
padding: 0px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 16px;
resize: vertical;
}
.btn {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
width: 100%;
font-size: 16px;
}
.btn:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<div class="container">
<h1>Excel 파일 제작하기</h1>
<div class="input-container">
<label for="csvData">각 행은 줄 바꿈으로 구분하고, 열은 쉼표로 구분하세요.</label>
<textarea id="csvData" rows="10" placeholder="예: 이름,나이,직업"></textarea>
</div>
<button class="btn" onclick="downloadExcelFromInput()">Excel 다운로드</button>
</div>
<script>
function generateExcelData(data) {
// 데이터 배열을 Excel의 워크북 형식으로 변환
const ws = XLSX.utils.aoa_to_sheet(data); // 2D 배열을 워크시트로 변환
const wb = XLSX.utils.book_new(); // 새로운 워크북 생성
XLSX.utils.book_append_sheet(wb, ws, "Sheet1"); // 워크북에 시트 추가
return wb;
}
function downloadExcel(data, filename = 'data.xlsx') {
const wb = generateExcelData(data); // Excel 파일 생성
XLSX.writeFile(wb, filename); // 파일 다운로드
}
function downloadExcelFromInput() {
const inputData = document.getElementById('csvData').value.trim();
if (!inputData) {
alert('데이터를 입력해 주세요!');
return;
}
// CSV 입력 데이터를 줄 바꿈으로 나누고, 쉼표로 각 열을 나눕니다.
const rows = inputData.split('\n').map(row => row.split(','));
downloadExcel(rows); // Excel 파일 다운로드
}
</script>
</body>
</html>
'GitHub' 카테고리의 다른 글
| 온디맨드 CSS 애니메이션으로 웹페이지 꾸미기 [CSS/JS] (1) | 2024.10.28 |
|---|---|
| 총알 피하기 게임 만들고 플레이 및 배포해보자 [GitHub Pages] (1) | 2024.10.24 |
| 카드 맞추기 게임 만들고 배포, 플레이까지 해보자 [GitHub Pages] (1) | 2024.10.22 |
| 깃허브 페이지에 두더지게임을 배포해보자 [PC/Mobile] (2) | 2024.10.21 |
| 깃허브 페이지로 데이터 시각화 도구를 배포해보자 [후기] (1) | 2024.10.17 |