dang dang dang, 新需求来敲门
点击上传Excel表格并显示在页面上应该也是比较常见的一个功能，这次仅做记录。
需要处理的Excel文档可能有多个sheet，需要把数据转换为json对象。这一方面已经有较成熟的库，SheetJS。

    import * as XLSX from 'xlsx';

    const reader = new FileReader();
        reader.onload = (e) => {
            /* Parse data */
            const ab = e.target.result;
            const wb = XLSX.read(ab, {type:'array'});
            /* Get first worksheet */
            const wsname = wb.SheetNames[0];
            const ws = wb.Sheets[wsname];
            /* Convert array of arrays */
            const data = XLSX.utils.sheet_to_json(ws, {header:1});
        };
        reader.readAsArrayBuffer(file);

使用XLSX自带的方法可以简单地读取.xlsx文件里任意一个sheet，并且把文件内容转换为json对象。
接下来为代码主体部分

  handleFileChange = (file: any) => {
        const reader = new FileReader();
        reader.onload = (e) => {
            /* Parse data */
            const ab = e.target.result;
            const wb = XLSX.read(ab, {type:'array'});

            this.handleInputSheet(wb);
        };
        reader.readAsArrayBuffer(file);

  };

  handleInputSheet = (wb: XLSX.WorkBook) => {
    const ws = wb.Sheets['input'];
    /* Convert array of arrays */
    const data = XLSX.utils.sheet_to_json(ws, {header:1});
    /* Update state */
    this.handleDataChange(data, this.makeColumns(ws['!ref']));
  }
  
  makeColumns = ( refstr: any) => {
    let o = [], C = XLSX.utils.decode_range(refstr).e.c + 1;
    for(var i = 0; i < C; ++i) o[i] = {name:XLSX.utils.encode_col(i), key:i}
    return o;
  };

  handleDataChange = (data: any, cols: any) => {
    this.setState({tableData: data, tableColumn: cols})
  };

  const loading  = !this.state.tableData.length || !this.state.tableColumn.length;


render(
           <XlsxInput handleFileChange={this.handleFileChange}/> //引入的input button组件
          {!loading && (
            <div className="excel-table" style={{overflowX:'auto', width: '600px'}}>
                 <table className="excelTable2003">
                  <thead>        
                    <tr>
                      <th className="heading"></th>
                        {column.map((c: {name: string, key: number}) => <th key={c.key}>{c.name}</th>)}
                    </tr>
                  </thead>
                  <tbody>
                    {data.map((r: any,i: number) => <tr key={i}>
                      <td className="heading">{i}</td>
                      {column.map((c: {name: string, key: number}) => <td key={c.key}>{ r[c.key] }</td>)}
                    </tr>)}
                  </tbody>
                </table>  
            </div>
          )}          

)

input button组件用来点击上传文件。 因为原生的input组件太丑了，所以这里多加了一层antd Button。

const Input = ({handleFileChange}: {handleFileChange: (file: any) => void}) => {

  const csvRef = useRef(null);

  const handleClick = (e: any) => {
    csvRef.current.click();
  }

  const handleChange = (e: any) => {
    const file = csvRef.current.files[0];
    if (!file) return;

    handleFileChange(file);
  }

  return (
    <>
      <Button onClick={handleClick}><UploadOutlined/>Upload</Button>
      <input type="file" accept=".xlsx" id="file" onChange={handleChange} ref={csvRef} style={{display: 'none'}}/>
    </>
  )

}