JavaScript 实现导入 JSON 文件并筛选出符合条件的内容并输出为文件

永保春

已于 2024-06-25 19:22:16 修改

阅读量118

点赞数 2

文章标签： json html5 javascript

于 2024-06-25 18:13:32 首次发布

本文链接：https://blog.csdn.net/qq_39143104/article/details/139965983

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSON to XLSX</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.0/xlsx.full.min.js"></script>
</head>
<body>
    <h1>导入 JSON 文件并导出为 XLSX 文件</h1>
    <input type="file" id="jsonFile" accept=".json" />
    <button onclick="exportToXlsx()">导出为 XLSX</button>

    <script>
        function exportToXlsx() {
            const fileInput = document.getElementById('jsonFile');
            if (fileInput.files.length === 0) {
                alert('请先选择一个 JSON 文件');
                return;
            }

            const file = fileInput.files[0];
            const reader = new FileReader();
            reader.onload = function(event) {
                try {
                    const jsonData = JSON.parse(event.target.result);

                    // 验证jsonData是否为数组
                    if (!Array.isArray(jsonData)) {
                        alert('JSON 文件内容不是一个数组');
                        return;
                    }

                    // 提取需要的数据
                    const dataToExport = jsonData.map(item => ({
                        编号: item.fid,
                        房间: item.froomName
                    }));

                    // 将数据转换为工作表
                    const worksheet = XLSX.utils.json_to_sheet(dataToExport);

                    // 创建一个新的工作簿
                    const workbook = XLSX.utils.book_new();
                    XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');

                    // 导出为xlsx文件
                    XLSX.writeFile(workbook, 'output.xlsx');
                    alert('XLSX文件已创建');
                } catch (error) {
                    alert('解析 JSON 文件时出错：' + error.message);
                }
            };
            reader.readAsText(file);
        }
    </script>
</body>
</html>

注意要是数组对象哦