如何使用HTML和JavaScript实现JSON文件上传转Excel并支持预览

以下是可直接运行的纯HTML+JavaScript代码，完全适配你给出的对象数组格式JSON，支持本地文件上传、内容预览、一键导出Excel三个核心功能，无需后端服务支持。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>JSON转Excel工具</title>
    <script src="https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js"></script>
    <style>
        .container {
            max-width: 1200px;
            margin: 20px auto;
            padding: 0 20px;
        }
        .upload-area {
            margin-bottom: 20px;
        }
        #downloadBtn {
            display: none;
            padding: 8px 16px;
            background: #409eff;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-bottom: 20px;
        }
        #previewTable {
            border-collapse: collapse;
            width: 100%;
        }
        #previewTable th, #previewTable td {
            border: 1px solid #eee;
            padding: 8px 12px;
            text-align: left;
        }
        #previewTable th {
            background: #f5f7fa;
        }
        .error-tip {
            color: #f56c6c;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="upload-area">
            <input type="file" id="jsonFile" accept=".json">
        </div>
        <button id="downloadBtn">下载Excel文件</button>
        <div id="previewArea"></div>
    </div>
    <script>
        const fileInput = document.getElementById('jsonFile')
        const downloadBtn = document.getElementById('downloadBtn')
        const previewArea = document.getElementById('previewArea')
        let parsedJson = null
        // 监听文件上传
        fileInput.addEventListener('change', e => {
            const file = e.target.files[0]
            if (!file) return
            const reader = new FileReader()
            reader.onload = event => {
                try {
                    parsedJson = JSON.parse(event.target.result)
                    // 校验格式是否为对象数组
                    if (!Array.isArray(parsedJson) || parsedJson.length === 0 || typeof parsedJson[0] !== 'object') {
                        previewArea.innerHTML = '<p class="error-tip">文件格式错误，请上传符合要求的对象数组格式JSON文件</p>'
                        downloadBtn.style.display = 'none'
                        parsedJson = null
                        return
                    }
                    // 渲染预览表格
                    renderPreview()
                    downloadBtn.style.display = 'block'
                } catch (err) {
                    previewArea.innerHTML = '<p class="error-tip">JSON解析失败，请检查文件内容是否合法</p>'
                    downloadBtn.style.display = 'none'
                    parsedJson = null
                }
            }
            reader.readAsText(file)
        })
        // 渲染预览内容
        function renderPreview() {
            const headers = Object.keys(parsedJson[0])
            let tableHtml = '<table id="previewTable"><thead><tr>'
            // 生成表头
            headers.forEach(header => {
                tableHtml += `<th>${header}</th>`
            })
            tableHtml += '</tr></thead><tbody>'
            // 生成行数据
            parsedJson.forEach(row => {
                tableHtml += '<tr>'
                headers.forEach(header => {
                    tableHtml += `<td>${row[header] ?? ''}</td>`
                })
                tableHtml += '</tr>'
            })
            tableHtml += '</tbody></table>'
            previewArea.innerHTML = tableHtml
        }
        // 下载Excel逻辑
        downloadBtn.addEventListener('click', () => {
            if (!parsedJson) return
            const worksheet = XLSX.utils.json_to_sheet(parsedJson)
            const workbook = XLSX.utils.book_new()
            XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
            XLSX.writeFile(workbook, '转换结果.xlsx')
        })
    </script>
</body>
</html>

使用说明 #

1. 将以上代码复制保存为.html后缀的文件，直接用浏览器打开即可使用
2. 点击文件选择框，上传符合要求的JSON文件，页面会自动解析并展示表格预览
3. 确认预览内容无误后，点击「下载Excel文件」按钮即可保存转换完成的xlsx格式文件

内容的提问来源于stack exchange，提问作者Melwin Jolly