excel读取修改导出

最新推荐文章于 2024-09-26 01:42:12 发布

一枚程序媛_嘻嘻

最新推荐文章于 2024-09-26 01:42:12 发布

阅读量110

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_66601972/article/details/133173067

版权

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <input type="file" id="inputFile" />
  <button id="updateButton">更新表格</button>
  <div id="tableContainer"></div>
  <script>
    const inputFile = document.getElementById('inputFile');
    const updateButton = document.getElementById('updateButton');
    const tableContainer = document.getElementById('tableContainer');

    // 监听文件上传的change事件
    inputFile.addEventListener('change', handleFile);

    // 读取并处理Excel文件
    function handleFile() {
      const file = inputFile.files[0];
      const reader = new FileReader();

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

        // 读取第一个sheet的数据
        const worksheet = workbook.Sheets[workbook.SheetNames[0]];
        const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });

        // 创建表格HTML并显示
        const tableHTML = createTableHTML(jsonData);
        tableContainer.innerHTML = tableHTML;
      };

      reader.readAsArrayBuffer(file);
    }

    // 创建表格HTML
    function createTableHTML(data) {
      let html = '<table>';

      for (let i = 0; i < data.length; i++) {
        html += '<tr>';

        for (let j = 0; j < data[i].length; j++) {
          html += `<td contenteditable>${data[i][j]}</td>`;
        }

        html += '</tr>';
      }

      html += '</table>';

      return html;
    }

    // 更新表格数据
    updateButton.addEventListener('click', updateTable);

    function updateTable() {
      const table = document.querySelector('table');
      const rows = table.getElementsByTagName('tr');

      const updatedData = [];

      // 遍历表格行
      for (let i = 0; i < rows.length; i++) {
        const cells = rows[i].getElementsByTagName('td');
        const rowData = [];

        // 遍历每行的单元格
        for (let j = 0; j < cells.length; j++) {
          const cell = cells[j];
          const newValue = cell.innerText;

          rowData.push(newValue);
        }

        updatedData.push(rowData);
      }

      // 将更新后的数据发送给后端
      fetch('/api/updateExcel', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(updatedData),
      })
        .then((response) => response.json())
        .then((data) => {
          console.log(data);
          alert('表格已更新');
        })
        .catch((error) => {
          console.error('Error:', error);
        });
    }
  </script>
  <!-- use version 0.20.0 -->
  <script lang="javascript" src="https://cdn.sheetjs.com/xlsx-0.20.0/package/dist/xlsx.full.min.js"></script>
</body>

</html>