初始化

2025-08-20 11:08:20 +08:00 · 2025-08-20 11:08:20 +08:00 · e66c90cd95
commit e66c90cd95
3 changed files with 307 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -0,0 +1,202 @@
 <!DOCTYPE html>
 <html lang="zh-CN">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSON数据导出为XLSX</title>
    <!-- 引入Tailwind CSS -->
    <script src="./tailwindcss.3.4.17.js"></script>
    <!-- 引入Font Awesome -->
    <!-- <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet"> -->
    <!-- 引入SheetJS库用于处理Excel文件 -->
    <script src="./xlsx.full.min.js"></script>
    <!-- 配置Tailwind自定义颜色和字体 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#10B981',
                        neutral: '#64748B',
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .transition-custom {
                transition: all 0.3s ease;
            }
            .shadow-custom {
                box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.02);
            }
        }
    </style>
 </head>
 <body class="bg-gray-50 font-sans text-gray-800 min-h-screen">
    <div class="container mx-auto px-4 py-8 max-w-4xl">
        <!-- 页面标题 -->
        <header class="mb-10 text-center">
            <h1 class="text-[clamp(1.8rem,5vw,2.5rem)] font-bold text-gray-800 mb-3 tracking-tight">
                JSON数据转XLSX工具
            </h1>
            <p class="text-neutral text-lg max-w-2xl mx-auto">
                查看数据表格并导出为Excel文件，方便进行进一步的数据处理和分析
            </p>
        </header>
        <!-- 主内容区 -->
        <main class="bg-white rounded-xl shadow-custom p-6 md:p-8 mb-8 transform hover:shadow-lg transition-custom">
            <!-- 数据表格 -->  
            <!-- 导出按钮 -->
            <div class="flex justify-center">
                <button id="export-btn" class="bg-primary hover:bg-primary/90 text-white font-medium py-3 px-6 rounded-lg shadow-md flex items-center transition-custom transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-primary/50">
                    <i class="fa fa-download mr-2"></i>
                    导出为XLSX文件
                </button>
            </div>
        </main>
        <!-- 页脚 -->
        <footer class="text-center text-neutral text-sm">
            <p>© 数据导出工具 | 使用SheetJS和Tailwind CSS构建</p>
        </footer>
    </div>
    <!-- 成功提示框 -->
    <div id="success-toast" class="fixed bottom-6 right-6 bg-secondary text-white px-6 py-3 rounded-lg shadow-lg transform translate-y-20 opacity-0 transition-all duration-300 flex items-center">
        <i class="fa fa-check-circle mr-2"></i>
        <span>文件导出成功！</span>
    </div>
    <script>
        // 数据
        const data = [
            { "name": "小王", "age": 18 },
            { "name": "小刘", "age": 18 },
            { "name": "小赵", "age": 18 }
        ];
        // DOM元素
        const tableBody = document.getElementById('data-table-body');
        const exportBtn = document.getElementById('export-btn');
        const successToast = document.getElementById('success-toast');
        // 填充表格数据
        function populateTable() {
            tableBody.innerHTML = '';
            data.forEach((item, index) => {
                const row = document.createElement('tr');
                row.className = index % 2 === 0 ? 'bg-white' : 'bg-gray-50';
                row.classList.add('hover:bg-gray-100', 'transition-custom');
                row.innerHTML = `
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="text-sm font-medium text-gray-900">${item.name}</div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="text-sm text-gray-500">${item.age}</div>
                    </td>
                `;
                tableBody.appendChild(row);
                // 添加淡入动画
                setTimeout(() => {
                    row.classList.add('opacity-100');
                    row.classList.remove('opacity-0', 'translate-y-2');
                }, 50 * index);
            });
        }
        // 导出为XLSX文件
        function exportToXLSX() {
            // 创建工作簿
            const wb = XLSX.utils.book_new();
            // 转换数据为工作表
            // 调整数据键名以匹配中文表头
            const formattedData = data.map(item => ({
                "姓名": item.name,
                "年龄": item.age
            }));
            const ws = XLSX.utils.json_to_sheet(formattedData);
            // 将工作表添加到工作簿
            XLSX.utils.book_append_sheet(wb, ws, "人员信息");
            // 生成并下载文件
            XLSX.writeFile(wb, "人员信息表.xlsx");
            // 显示成功提示
            showSuccessToast();
        }
        // 显示成功提示
        function showSuccessToast() {
            successToast.classList.remove('translate-y-20', 'opacity-0');
            successToast.classList.add('translate-y-0', 'opacity-100');
            // 3秒后隐藏提示
            setTimeout(() => {
                successToast.classList.remove('translate-y-0', 'opacity-100');
                successToast.classList.add('translate-y-20', 'opacity-0');
            }, 3000);
        }
        // 事件监听
        exportBtn.addEventListener('click', exportToXLSX);
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', () => {
            populateTable();
            // 为导出按钮添加点击波纹效果
            exportBtn.addEventListener('click', function(e) {
                const ripple = document.createElement('span');
                const x = e.clientX - e.target.getBoundingClientRect().left;
                const y = e.clientY - e.target.getBoundingClientRect().top;
                ripple.style.width = ripple.style.height = Math.max(e.target.offsetWidth, e.target.offsetHeight) + 'px';
                ripple.style.left = x - (parseInt(ripple.style.width) / 2) + 'px';
                ripple.style.top = y - (parseInt(ripple.style.height) / 2) + 'px';
                ripple.classList.add('ripple', 'absolute', 'bg-white', 'opacity-30', 'rounded-full', 'transform', 'scale-0', 'transition-transform', 'duration-600');
                this.appendChild(ripple);
                setTimeout(() => {
                    ripple.remove();
                }, 600);
            });
        });
    </script>
    <style>
        /* 波纹效果样式 */
        #export-btn {
            position: relative;
            overflow: hidden;
        }
        /* 表格行初始状态（用于动画） */
        #data-table-body tr {
            opacity: 0;
            transform: translateY(2px);
            transition: opacity 0.3s ease, transform 0.3s ease;
        }
    </style>
 </body>
 </html>
--- a/tailwindcss.3.4.17.js
+++ b/tailwindcss.3.4.17.js
--- a/xlsx.full.min.js
+++ b/xlsx.full.min.js