增加json转csv工具

Author: xindoo

static/js/json-csv-converter.js

@@ -0,0 +1,66 @@
+const inputArea = document.getElementById('inputData');
+const outputArea = document.getElementById('outputData');
+const errorDisplay = document.getElementById('errorDisplay');
+
+function clearError() {
+    errorDisplay.textContent = '';
+}
+
+function convertToCsv() {
+    clearError();
+    const jsonInput = inputArea.value.trim();
+    if (!jsonInput) {
+        errorDisplay.textContent = 'Please enter JSON data.';
+        outputArea.value = '';
+        return;
+    }
+
+    try {
+        const jsonData = JSON.parse(jsonInput);
+        if (!Array.isArray(jsonData)) {
+            errorDisplay.textContent = 'Input must be a JSON array of objects.';
+            outputArea.value = '';
+            return;
+        }
+        if (jsonData.length === 0) {
+            outputArea.value = '';
+            return;
+        }
+
+        const headers = Object.keys(jsonData[0]);
+        const csvRows = [];
+        csvRows.push(headers.join(','));
+
+        for (const row of jsonData) {
+            const values = headers.map(header => {
+                const escaped = ('' + row[header]).replace(/"/g, '""');
+                return `"${escaped}"`;
+            });
+            csvRows.push(values.join(','));
+        }
+
+        outputArea.value = csvRows.join('\n');
+    } catch (e) {
+        console.error("JSON to CSV Error:", e);
+        if (e instanceof SyntaxError) {
+            errorDisplay.textContent = `JSON Parsing Error: ${e.message}`;
+        } else {
+            errorDisplay.textContent = `CSV Conversion Error: ${e.message}`;
+        }
+        outputArea.value = '';
+    }
+}
+
+function copyToClipboard() {
+   if (!outputArea.value) return;
+   navigator.clipboard.writeText(outputArea.value).then(() => {
+       const icon = document.querySelector('.copy-icon');
+       const originalPath = icon.innerHTML;
+       icon.innerHTML = `<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>`;
+       setTimeout(() => {
+           icon.innerHTML = originalPath;
+       }, 2000);
+   }).catch(err => {
+       alert('无法复制到剪贴板: ' + err);
+   });
+}

static/tools/json-csv-converter.html

@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>JSON to CSV Converter</title>
+    <link rel="stylesheet" href="../css/style.css">
+   <style>
+       .output-container {
+           position: relative;
+       }
+       .copy-icon {
+           position: absolute;
+           top: 5px;
+           right: 5px;
+           cursor: pointer;
+           width: 24px;
+           height: 24px;
+           fill: #888;
+       }
+       .copy-icon:hover {
+           fill: #000;
+       }
+   </style>
+</head>
+<body>
+    <div class="tool-container tool-container-vertical">
+        <div class="tool-header">
+            <h1>JSON to CSV Converter</h1>
+            <p>Convert data from JSON format to CSV format.</p>
+        </div>
+
+        <div id="errorDisplay" class="tool-error"></div>
+
+        <div class="tool-io-section">
+            <label for="inputData" class="tool-label">Input (JSON):</label>
+            <textarea id="inputData" class="tool-textarea" placeholder="Paste JSON here..."></textarea>
+        </div>
+
+        <div class="tool-controls">
+            <button onclick="convertToCsv()" class="tool-button">Convert to CSV</button>
+        </div>
+
+        <div class="tool-io-section">
+            <label for="outputData" class="tool-label">Output (CSV):</label>
+           <div class="output-container">
+               <textarea id="outputData" class="tool-textarea" readonly placeholder="Conversion result will appear here..."></textarea>
+               <svg class="copy-icon" onclick="copyToClipboard()" viewBox="0 0 24 24">
+                   <path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/>
+               </svg>
+           </div>
+        </div>
+    </div>
+
+    <script src="../js/json-csv-converter.js"></script>
+</body>
+</html>

tools.json

@@ -140,6 +140,12 @@
         "path": "converter/json-yaml",
         "filePath": "static/tools/json-yaml-converter.html"
       },
+      {
+        "name_zh": "JSON转CSV",
+        "name_en": "JSON to CSV Converter",
+        "path": "converter/json-csv",
+        "filePath": "static/tools/json-csv-converter.html"
+      },
       {
         "name_zh": "进制转换",
         "name_en": "Base Converter",