Notice
Recent Posts
Recent Comments
Link
«   2025/05   »
일 월 화 수 목 금 토
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

유령노트

JS에서 EXCEL -> CSV 변환 및 다운로드 기능 본문

# Dev/Javascript

JS에서 EXCEL -> CSV 변환 및 다운로드 기능

유령손 2020. 9. 24. 09:40

GITHUB

https://github.com/kkaok/examples/blob/master/jsExcelExample/src/main/resources/static/html/js-excel-example03.html

 

kkaok/examples

example. Contribute to kkaok/examples development by creating an account on GitHub.

github.com

원본예제)

js excel example.html
0.00MB

원본 소스

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!DOCTYPE html>
<html>
 
<head>
    <meta charset="UTF-8">
    <title>js excel example 03</title>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.14.3/xlsx.full.min.js"></script>
    <script>
        function excelExport(event) {
            excelExportCommon(event, handleExcelDataAll);
        }
        function excelExportCommon(event, callback) {
            var input = event.target;
            var reader = new FileReader();
            reader.onload = function () {
                var fileData = reader.result;
                var wb = XLSX.read(fileData, { type: 'binary' });
                var sheetNameList = wb.SheetNames; // 시트 이름 목록 가져오기
                var firstSheetName = sheetNameList[0]; // 첫번째 시트명
                var firstSheet = wb.Sheets[firstSheetName]; // 첫번째 시트
                callback(firstSheet);
            };
            reader.readAsBinaryString(input.files[0]);
        }
        function handleExcelDataAll(sheet) {
            handleExcelDataHeader(sheet); // header 정보
            handleExcelDataJson(sheet); // json 형태
            handleExcelDataCsv(sheet); // csv 형태
            handleExcelDataHtml(sheet); // html 형태
        }
        function handleExcelDataHeader(sheet) {
            var headers = get_header_row(sheet);
            $("#displayHeaders").html(JSON.stringify(headers));
        }
        function handleExcelDataJson(sheet) {
            $("#displayExcelJson").html(JSON.stringify(XLSX.utils.sheet_to_json(sheet)));
        }
        function handleExcelDataCsv(sheet) {
            $("#displayExcelCsv").html(XLSX.utils.sheet_to_csv(sheet));
        }
        function handleExcelDataHtml(sheet) {
            $("#displayExcelHtml").html(XLSX.utils.sheet_to_html(sheet));
        }
        // 출처 : https://github.com/SheetJS/js-xlsx/issues/214
        function get_header_row(sheet) {
            var headers = [];
            var range = XLSX.utils.decode_range(sheet['!ref']);
            var C, R = range.s.r; /* start in the first row */
            /* walk every column in the range */
            for (C = range.s.c; C <= range.e.c; ++C) {
                var cell = sheet[XLSX.utils.encode_cell({ c: C, r: R })] /* find the cell in the first row */
                var hdr = "UNKNOWN " + C; // <-- replace with your desired default
                if (cell && cell.t) hdr = XLSX.utils.format_cell(cell);
                headers.push(hdr);
            }
            return headers;
        }
    </script>
</head>
 
<body>
    파일 선택 : <input type="file" id="excelFile" onchange="excelExport(event)" />
    <h1>Header 정보 보기</h1>
    <div id="displayHeaders"></div>
    <h1>JSON 형태로 보기</h1>
    <div id="displayExcelJson"></div>
    <h1>CSV 형태로 보기</h1>
    <div id="displayExcelCsv"></div>
    <h1>HTML 형태로 보기</h1>
    <div id="displayExcelHtml"></div>
</body>
 
</html>
cs

 

- CSV 다운로드 기능 추가 완료

- CSV 헤더 제거 추가

test.html
0.00MB

 

xlsx.full.min.js
0.88MB

 

 

저작자표시 (새창열림)

'# Dev > Javascript' 카테고리의 다른 글

undefined, null, 공백 체크  (0) 2020.11.02
파일 체크 스크립트  (0) 2020.09.24
id 미사용 form 데이터 유효성 검사  (0) 2019.08.22
함수 속도 체크  (0) 2018.04.03
window.location, URL에서 값 가져오기  (0) 2017.10.17
'# Dev/Javascript' Related Articles more