html js 上传excel文档 获取excel文档数据

你可以使用 HTML 和 JavaScript 共同实现上传 Excel 文档并获取其中的数据。

以下是一个简单的示例代码：

<input type="file" id="fileInput" onchange="handleFileSelect(event)">
<table id="dataTable">
  <thead>
    <tr>
      <th>列1</th>
      <th>列2</th>
      <th>列3</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.16.9/xlsx.full.min.js"></script>
<script>
  function handleFileSelect(event) {
    const file = event.target.files[0];
    const reader = new FileReader();

    reader.onload = (event) => {
      const data = new Uint8Array(event.target.result);
      const workbook = XLSX.read(data, { type: 'array' });
      const worksheet = workbook.Sheets[workbook.SheetNames[0]];
      const rows = XLSX.utils.sheet_to_json(worksheet, { header: 1 });

      const tableBody = document.querySelector('#dataTable tbody');
      tableBody.innerHTML = '';

      rows.forEach((row, index) => {
        if (index === 0) {
          return; // Skip header row
        }

        const tr = document.createElement('tr');

        row.forEach((cellValue) => {
          const td = document.createElement('td');
          td.textContent = cellValue;
          tr.appendChild(td);
        });

        tableBody.appendChild(tr);
      });
    };

    reader.readAsArrayBuffer(file);
  }
</script>

这段代码中，我们首先创建了一个 `<input type="file">` 元素，用于选择本地的 Excel 文档。当用户选择文件后，`handleFileSelect` 函数将被调用，并使用 `FileReader` 对象读取文件，并将读取到的数据传递给 SheetJS 库中的 `XLSX.read` 方法，以创建一个 `Workbook` 对象。接着，我们从 `Workbook` 对象中获取第一个工作表，并使用 `XLSX.utils.sheet_to_json` 方法将其转换为 JSON 格式的数据，以便后续操作。

然后，我们创建一个 `<table>` 元素，并在其中创建一个 `<thead>` 元素和一个 `<tbody>` 元素。我们还为表头添加了三列，分别为“列1”、“列2”和“列3”。在获取到 Excel 数据后，我们遍历每一行，并在表格的 `<tbody>` 中创建一行，并为每个单元格添加一个 `<td>` 元素，最后将这个 `<tr>` 元素添加到表格中。

注意，这里使用的 SheetJS 库需要在代码中进行引入。你也可以使用其他类似的库来实现类似的功能。此外，由于读取 Excel 文件需要大量的计算资源，因此在处理大型数据集时可能会面临性能问题。