반응형
엑셀 파일을 웹 화면에 불러와서 내용을 정리하고 싶을 때가 있다.
이때, 파일을 불러와서 간단하게 화면에 노출을 하고 정리를 하는 방법이 있다.
1. cdn 파일 호출하기
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.15.5/xlsx.full.min.js"></script>파일을 저장한 다음 파일을 호출하여도 문제는 없겠으나,
그것 보다는 간단하게 cdn을 상단에 정의하여 호출하는 부분이 사이트가 가벼워지는데도 도움이 된다.
2. html 작성하기
<html>
<body>
<input type="file" onchange="readExcel()">
</body>
</html>html에서 파일을 가져올 input을 하나 선언합니다.
그리고 파일이 변경이 될 때마다 수정이 될 수 있도록 onchange에다가 함수를 호출합니다.
3. script 작성하기
<script>
function readExcel() {
let input = event.target;
let reader = new FileReader();
reader.onload = function () {
let data = reader.result;
let workBook = XLSX.read(data, { type: 'binary' });
workBook.SheetNames.forEach(function (sheetName) {
// 엑셀의 각 sheet명을 찍는다.
console.log('SheetName: ' + sheetName);
let rows = XLSX.utils.sheet_to_json(workBook.Sheets[sheetName]);
// 해당 sheet의 값들을 노출한다.
console.log(JSON.stringify(rows));
})
};
reader.readAsBinaryString(input.files[0]);
}
</script>콘솔에다 선택한 엑셀 값이 노출이 됩니다.
예시
| 순번 | 이름 | 나이 |
| 1 | 홍길동 | 18 |
| 2 | 김철수 | 16 |
위의 내용을 가진 sheet의 콘솔로 찍는다고 할 때,
[{"순번":"1',"이름":"홍길동","나이","18"}, {"순번":"2',"이름":"김철수","나이","16"} ]위와 같이 console 창에 찍히는 것을 확인할 수 있다.
* 엑셀의 날짜가 숫자로 표기될때, 날짜형식으로 변경하는 방법
https://hayo-today.tistory.com/58
html에서 엑셀파일 날짜 변환
html에서 엑셀파일을 호출해서 화면에 노출을 하였다. > https://hayo-today.tistory.com/57 html에서 엑셀파일 읽는 방법엑셀 파일을 웹 화면에 불러와서 내용을 정리하고 싶을 때가 있다.이때, 파일을 불
hayo-today.tistory.com
반응형
'IT > HTML|Script|PHP' 카테고리의 다른 글
| <meta> Open Graph(오픈그래프) 태그 (0) | 2024.06.26 |
|---|---|
| html에서 엑셀파일 날짜 변환 (0) | 2024.05.27 |
| 요소 노출 여부 판단하기 (0) | 2024.05.05 |
| [PHP > js] php 배열 스크립트에서 배열로 받기 (0) | 2024.05.04 |
| 모바일 웹에서 전화, 문자, 이메일 보내는 방법 (0) | 2022.04.17 |
댓글