index.html 3.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. <!DOCTYPE HTML>
  2. <html lang="zh-CN">
  3. <head>
  4. <title>Excel/CSV 转 JSON 工具 - FeHelper</title>
  5. <meta charset="UTF-8">
  6. <link rel="stylesheet" href="index.css" />
  7. </head>
  8. <body>
  9. <div class="wrapper" id="excel2jsonContainer">
  10. <div class="main-navbar">
  11. <div class="navbar-brand">
  12. <a href="https://www.baidufe.com/fehelper/index/index.html" target="_blank" class="brand-link">
  13. <img src="../static/img/fe-16.png" alt="fehelper"/>
  14. <span class="brand-text">FeHelper</span>
  15. <span class="brand-subtitle">Excel/CSV 转 JSON</span>
  16. </a>
  17. </div>
  18. <div class="navbar-actions panel-title">
  19. <a href="#" class="x-donate-link"><i class="nav-icon">❤&nbsp;</i>打赏鼓励</a>
  20. <a class="x-other-tools"><i class="icon-plus-circle"></i> 探索更多实用工具 <span class="tool-market-badge">工具市场</span></a>
  21. </div>
  22. </div>
  23. <div class="main-container">
  24. <div class="panel panel-default">
  25. <div class="panel-body excel2json-flex-panel">
  26. <!-- 左侧输入区 -->
  27. <div class="input-zone">
  28. <div class="input-ops">
  29. <div class="input-ops-row">
  30. <input type="file" id="fileInput" accept=".xlsx,.xls,.csv" style="display: none;"/>
  31. <a href="#" class="btn btn-secondary example-btn btn-file-input" data-example="simple">选择Excel/CSV文件</a>
  32. <a href="#" class="link-btn" data-example="simple">示例:简单表格</a>
  33. <a href="#" class="link-btn" data-example="user">示例:用户信息</a>
  34. <a href="#" class="link-btn" data-example="score">示例:成绩单</a>
  35. <button id="convertBtn" class="btn btn-primary convert-btn"><i class="fas fa-sync-alt"></i> 转换为 JSON</button>
  36. </div>
  37. <span id="errorMsg" class="error-msg"></span>
  38. </div>
  39. <textarea id="pasteInput" placeholder="可直接粘贴表格内容(支持CSV格式)" rows="18" class="input-textarea"></textarea>
  40. </div>
  41. <!-- 右侧输出区 -->
  42. <div class="output-zone">
  43. <div class="output-header output-header-block">
  44. <button id="copyBtn" class="btn btn-outline copy-btn"><i class="fas fa-copy"></i> 复制</button>
  45. </div>
  46. <textarea id="jsonOutput" readonly rows="18" class="output-textarea"></textarea>
  47. </div>
  48. </div>
  49. </div>
  50. </div>
  51. </div>
  52. <!-- xlsx.full.min.js 复用 chart-maker/lib 目录下的文件 -->
  53. <script src="../chart-maker/lib/xlsx.full.min.js"></script>
  54. <script src="index.js" type="module"></script>
  55. </body>
  56. </html>