基于react/antd的纯前端js导入excel

基于React和Ant Design，我们可以使用一些库来实现在纯前端中导入Excel文件。

首先，我们可以使用`react-excel-to-json`库将Excel文件转换为JSON格式。通过这个库，我们可以将Excel文件转换为JSON对象，方便我们在前端进行处理和展示。

其次，Ant Design的Upload组件可以帮助我们实现文件上传功能。我们可以使用`beforeUpload`属性来限制上传文件的类型为Excel文件。一旦用户上传了Excel文件，我们就可以调用`react-excel-to-json`来实现文件的解析，将Excel文件转换为JSON数据。

最后，我们可以通过自定义组件来展示解析后的数据。我们可以使用Table组件来展示JSON数据，将每一行数据显示在表格中。

下面是一个示例代码，演示了如何在基于React和Ant Design的纯前端应用中实现导入Excel文件功能：

import React from 'react';
import { Upload, Button, Table } from 'antd';
import { ExcelRenderer } from 'react-excel-to-json';

class ExcelImporter extends React.Component {
  state = {
    excelData: [],
  };

  handleImportExcel = (file) => {
    ExcelRenderer(file, (err, res) => {
      if (err) {
        console.log(err);
      } else {
        this.setState({ excelData: res.rows });
      }
    });
  };

  render() {
    const { excelData } = this.state;

    const columns = excelData.length > 0 ? Object.keys(excelData[0]) : [];

    return (
      <div>
        <Upload beforeUpload={this.handleImportExcel}>
          <Button>导入Excel文件</Button>
        </Upload>
        {excelData.length > 0 && (
          <Table dataSource={excelData} columns={columns.map((column) => ({ dataIndex: column, title: column }))} />
        )}
      </div>
    );
  }
}

export default ExcelImporter;

在这个示例中，我们通过`Upload`组件来实现文件的上传，通过`beforeUpload`属性限制了只能上传Excel文件。在`handleImportExcel`方法中，我们调用了`ExcelRenderer`来将Excel文件解析为JSON数据，并将数据保存在组件的状态中。

在页面上，我们使用了`Table`组件来展示解析后的JSON数据，通过`dataSource`属性传入数据，通过`columns`属性定义表格的列。

这样，用户在选择并上传Excel文件后，我们就可以在前端解析并展示Excel中的数据了。这种方式适用于只需要在前端进行Excel数据处理和展示的场景。