html选择excel文件，获取数据

可以使用<input type="file">标签选择Excel文件，然后使用JavaScript和相应的库（如js-xlsx）将数据从Excel文件中提取出来。以下是一个简单的示例：

HTML代码:

<input type="file" id="input"/>

JavaScript代码:

const input = document.getElementById('input');

input.addEventListener('change', () => {
  const file = input.files[0];
  const reader = new FileReader();

  reader.onload = () => {
    const data = reader.result;

    // 使用js-xlsx等库从数据中提取Excel数据
  };

  reader.readAsBinaryString(file);
});

请注意，您需要将js-xlsx等库添加到您的项目中。

相关问题

html选择excel文件，python获取数据

您可以使用HTML中的<input>标记的type属性设置为"file"来创建一个文件选择框。 然后使用Python中的pandas库来读取选定的Excel文件，并将其转换为数据帧。

以下是一个示例代码：

HTML代码：

<input type="file" accept=".xlsx" onchange="loadFile(event)">

JavaScript代码：

function loadFile(event) {
  var input = event.target;
  var reader = new FileReader();
  reader.onload = function(){
    var data = new Uint8Array(reader.result);
    var workbook = XLSX.read(data,{type:'array'});
    var sheet_name_list = workbook.SheetNames;
    var xlData = XLSX.utils.sheet_to_json(workbook.Sheets[sheet_name_list[0]]);
    console.log(xlData);
    //send xlData to backend
  };
  reader.readAsArrayBuffer(input.files[0]);
};

Python代码：

import pandas as pd

file = 'path/to/file.xlsx'
df = pd.read_excel(file)
print(df)

注意：如果您想使用JavaScript发送数据到后端，请在JavaScript代码中添加适当的AJAX请求或使用一个表单来提交数据。

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 文件需要大量的计算资源，因此在处理大型数据集时可能会面临性能问题。