execl合并多sheet，HTML/Vue代码在线实时编辑、预览

            
                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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115

            
            <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Excel Sheet Merger</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.16.9/xlsx.full.min.js"></script>
    <style>
        body {
            background-color: #ffe6e6; /* 淡红色背景 */
            font-family: Arial, sans-serif;
            padding: 20px;
        }
        #progressBar {
            width: 100%;
            background-color: #f3f3f3;
            margin-top: 10px;
        }
        #progressBarFill {
            width: 0%;
            height: 30px;
            background-color: #4caf50;
            text-align: center;
            line-height: 30px;
            color: white;
        }
        button {
            margin: 5px;
            padding: 10px 20px;
            background-color: #ff6666; /* 淡红色按钮 */
            color: white;
            border: none;
            cursor: pointer;
            border-radius: 5px;
        }
        button:disabled {
            background-color: #cccccc;
            cursor: not-allowed;
        }
        input[type="file"] {
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <h1>Excel Sheet Merger</h1>
    <input type="file" id="fileInput" accept=".xlsx, .xls" />
    <button id="startButton" disabled>Start Merge</button>
    <button id="clearButton">Clear Data</button>
    <div id="progressBar">
        <div id="progressBarFill">0%</div>
    </div>
    <button id="exportButton" disabled>Export Merged File</button>

    <script>
        let workbook = null;
        let mergedData = [];

        document.getElementById('fileInput').addEventListener('change', function(event) {
            const file = event.target.files[0];
            if (file) {
                document.getElementById('startButton').disabled = false;
            }
        });

        document.getElementById('startButton').addEventListener('click', function() {
            const file = document.getElementById('fileInput').files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    const data = new Uint8Array(e.target.result);
                    workbook = XLSX.read(data, {type: 'array'});

                    // 合并所有Sheet的数据
                    mergedData = [];
                    workbook.SheetNames.forEach(sheetName => {
                        const worksheet = workbook.Sheets[sheetName];
                        const json = XLSX.utils.sheet_to_json(worksheet);
                        mergedData = mergedData.concat(json);
                    });

                    document.getElementById('exportButton').disabled = false;
                    updateProgress(100);
                };
                reader.readAsArrayBuffer(file);
            }
        });

        document.getElementById('clearButton').addEventListener('click', function() {
            document.getElementById('fileInput').value = '';
            document.getElementById('startButton').disabled = true;
            document.getElementById('exportButton').disabled = true;
            workbook = null;
            mergedData = [];
            updateProgress(0);
        });

        document.getElementById('exportButton').addEventListener('click', function() {
            if (workbook && mergedData.length > 0) {
                const newWorkbook = XLSX.utils.book_new();
                const newSheet = XLSX.utils.json_to_sheet(mergedData);
                XLSX.utils.book_append_sheet(newWorkbook, newSheet, 'Merged Sheet');
                XLSX.writeFile(newWorkbook, 'merged_excel.xlsx');
            }
        });

        function updateProgress(percent) {
            const progressBarFill = document.getElementById('progressBarFill');
            progressBarFill.style.width = percent + '%';
            progressBarFill.textContent = percent + '%';
        }
    </script>
</body>
</html>