如何通过HTML单个输入框生成仅修改指定ValueXml值的预设JSON文件

核心逻辑 #

直接将预设的固定JSON结构定义为JavaScript对象，仅修改目标层级的ValueXml字段值，再将修改后的对象转换为JSON文件触发下载，全程不涉及复杂的字符串操作，不会破坏JSON结构，也不会误改其他同名字段。

完整可运行代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>JSON生成工具</title>
</head>
<body>
    <!-- 原有输入框 -->
    <label for="psw"><b>name</b></label>
    <input type="text" placeholder="Insert ValueXml value" name="psw" id="value-input" required>
    <!-- 新增下载触发按钮 -->
    <button id="download-btn">生成并下载JSON</button>

    <script>
        // 预设JSON模板，所有固定字段无需修改
        const defaultJsonTemplate = {
            "fileType": {
                "accountingType": {
                    "docGroup": 100,
                    "docApp": 100,
                    "decimals": 2
                }
            },
            "data": {
                "format": "documentchange",
                "error": "",
                "data": [
                    {
                        "document": {
                            "fileVersion": "1.0.0",
                            "creator": {
                                "name": "FinancialPlaWriter",
                                "version": "1.0.0"
                            },
                            "dataUnits": [
                                {
                                    "nameXml": "FileInfo",
                                    "data": {
                                        "rowLists": [
                                            {
                                                "rows": [
                                                    {
                                                        "fields": {
                                                            "SectionXml": "Base",
                                                            "IdXml": "HeaderLeft",
                                                            "ValueXml": "Accounting Header 1"
                                                        },
                                                        "operation": {
                                                            "name": "modify"
                                                        }
                                                    },
                                                    {
                                                        "fields": {
                                                            "SectionXml": "AccountingDataBase",
                                                            "IdXml": "OpeningDate",
                                                            "ValueXml": "20210101"
                                                        },
                                                        "operation": {
                                                            "name": "modify"
                                                        }
                                                    },
                                                    {
                                                        "fields": {
                                                            "SectionXml": "AccountingDataBase",
                                                            "IdXml": "ClosureDate",
                                                            "ValueXml": "20231231"
                                                        },
                                                        "operation": {
                                                            "name": "modify"
                                                        }
                                                    }
                                                ]
                                            }
                                        ]
                                    }
                                ]
                            }
                        }
                    }
                ]
            }
        }

        // 下载触发逻辑
        document.getElementById('download-btn').addEventListener('click', () => {
            const inputVal = document.getElementById('value-input').value.trim()
            if (!inputVal) {
                alert('请输入ValueXml值')
                return
            }
            // 深拷贝模板避免污染原模板数据
            const outputData = JSON.parse(JSON.stringify(defaultJsonTemplate))
            // 替换目标字段值
            outputData.data.data[0].document.dataUnits[0].data.rowLists[0].rows[0].fields.ValueXml = inputVal
            // 转换为格式化JSON字符串
            const jsonContent = JSON.stringify(outputData, null, 4)
            // 生成文件并触发下载
            const blob = new Blob([jsonContent], { type: 'application/json' })
            const downloadUrl = URL.createObjectURL(blob)
            const aTag = document.createElement('a')
            aTag.href = downloadUrl
            aTag.download = 'config.json'
            aTag.click()
            URL.revokeObjectURL(downloadUrl)
        })
    </script>
</body>
</html>

特性说明 #

• 纯前端实现，无需服务端支持，直接打开HTML文件即可使用
• 除目标ValueXml字段外，其余所有字段完全沿用预设值，不会产生任何变动
• 输出的JSON为格式化结构，和你给出的预期格式完全一致

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