效果图

clipbord_1756190172745

 clipbord_1756190172745

 

image

 

 

 

 

源码  复制粘贴到 空白 .html文件中运行即可



<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Excel转JSON转换器</title>
  <script src="https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js"></script>
  <style>
    body {
      font-family: Arial, sans-serif;
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
    }

    .container {
      border: 2px dashed #ccc;
      padding: 20px;
      border-radius: 8px;
      text-align: center;
    }

    #fileInput {
      display: none;
    }

    #uploadBtn {
      background-color: #4CAF50;
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 16px;
    }

    #result {
      margin-top: 20px;
      text-align: left;
      white-space: pre-wrap;
      background: #f5f5f5;
      padding: 15px;
      border-radius: 4px;
      max-height: 300px;
      overflow-y: auto;
    }

    #downloadBtn {
      margin-top: 15px;
      background-color: #2196F3;
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      display: none;
    }

    .field-selector {
      margin: 15px 0;
      text-align: left;
    }

    .field-item {
      margin: 5px 0;
    }
  </style>
</head>

<body>
  <div class="container">
    <h2>Excel转JSON转换器</h2>
    <p>选择Excel文件并指定需要提取的字段</p>

    <input type="file" id="fileInput" accept=".xlsx, .xls" />
    <button id="uploadBtn">选择Excel文件</button>

    <div id="fieldSelector" class="field-selector" style="display:none;">
      <h3>请选择需要提取的字段：</h3>
      <div id="fieldList"></div>
      <button id="confirmBtn">确认提取</button>
    </div>

    <div id="result"></div>
    <button id="downloadBtn">下载JSON文件</button>
  </div>

  <script>
    document.getElementById('uploadBtn').addEventListener('click', function () {
      document.getElementById('fileInput').click();
    });

    document.getElementById('fileInput').addEventListener('change', function (e) {
      const file = e.target.files[0];
      if (!file) return;

      const reader = new FileReader();
      reader.onload = function (e) {
        const data = new Uint8Array(e.target.result);
        const workbook = XLSX.read(data, { type: 'array' });

        // 获取第一个工作表
        const sheetName = workbook.SheetNames[0];
        const worksheet = workbook.Sheets[sheetName];

        // 转换为JSON格式
        const jsonData = XLSX.utils.sheet_to_json(worksheet);

        if (jsonData.length === 0) {
          alert('Excel文件中没有数据！');
          return;
        }

        // 显示字段选择器
        document.getElementById('fieldSelector').style.display = 'block';

        // 获取所有字段名
        const fields = Object.keys(jsonData[0]);
        const fieldList = document.getElementById('fieldList');
        fieldList.innerHTML = '';

        // 创建字段选择复选框
        fields.forEach(field => {
          const div = document.createElement('div');
          div.className = 'field-item';

          const checkbox = document.createElement('input');
          checkbox.type = 'checkbox';
          checkbox.id = field;
          checkbox.value = field;
          checkbox.checked = true;

          const label = document.createElement('label');
          label.htmlFor = field;
          label.textContent = field;

          div.appendChild(checkbox);
          div.appendChild(label);
          fieldList.appendChild(div);
        });

        // 确认按钮事件
        document.getElementById('confirmBtn').onclick = function () {
          const selectedFields = [];
          const checkboxes = fieldList.querySelectorAll('input[type="checkbox"]:checked');
          checkboxes.forEach(checkbox => {
            selectedFields.push(checkbox.value);
          });

          if (selectedFields.length === 0) {
            alert('请至少选择一个字段！');
            return;
          }

          // 提取指定字段
          const result = jsonData.map(item => {
            const newItem = {};
            selectedFields.forEach(field => {
              newItem[field] = item[field];
            });
            return newItem;
          });

          // 显示结果
          document.getElementById('result').textContent = JSON.stringify(result, null, 2);
          document.getElementById('downloadBtn').style.display = 'inline-block';

          // 设置下载功能
          document.getElementById('downloadBtn').onclick = function () {
            const blob = new Blob([JSON.stringify(result, null, 2)], { type: 'application/json' });
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = file.name.replace(/\.[^/.]+$/, '') + '.json';
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(url);
          };
        };
      };
      reader.readAsArrayBuffer(file);
    });
  </script>
</body>

</html>