前端读取excel流并展示

前端读取Excel文件流并展示通常涉及到两个步骤：首先需要解析Excel文件，然后将数据渲染到网页上。这可以使用JavaScript库如FileSaver.js、xlsx或者js-xlsx等来进行。以下是基本流程：

1. **文件选择**: 使用HTML5的`<input type="file">`元素让用户选择Excel文件。

<input type="file" id="fileInput" accept=".xls, .xlsx" />

2. **文件读取**: 文件选择后，通过JavaScript获取文件对象，然后创建一个Blob对象，它是二进制数据的表示形式。

const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', (event) => {
  const file = event.target.files[0];
  const reader = new FileReader();
  reader.readAsArrayBuffer(file);
  reader.onloadend = function() {
    const arrayBuffer = reader.result;
  };
});

3. **解析数据**: 使用`xlsx`库，从ArrayBuffer读取的数据可以转换为工作表对象。

const workbook = XLSX.read(arrayBuffer, {type: 'array'});
const sheetNameList = workbook.SheetNames;
let sheetData = XLSX.utils.sheet_to_json(workbook[sheetNameList[0]]);

4. **数据展示**: 最后，你可以选择直接显示在表格组件（如Vue的Element UI的el-table，React的Ant Design的Table等）中，或者转化为JSON字符串供前端处理后显示。

// 示例：渲染到表格
document.getElementById('data-container').innerHTML = JSON.stringify(sheetData, null, 2); // 展示到预设的div