react-excel-渲染器

有一个完美的图书馆正是为此！它首先将 excel 数据转换为 JSON，然后将其呈现为 HTML 表格。它叫做react-excel-renderer

• 安装它 npm install react-excel-renderer --save

• 导入两个组件ExcelRenderer和OutTable

  import {ExcelRenderer, OutTable} from 'react-excel-renderer';

• 将文件对象提供给事件处理程序中的 ExcelRenderer 函数

    fileHandler = (event) => {
  let fileObj = event.target.files[0];
  
  //just pass the fileObj as parameter
  ExcelRenderer(fileObj, (err, resp) => {
    if(err){
      console.log(err);            
    }
    else{
      this.setState({
        cols: resp.cols,
        rows: resp.rows
      });
    }
  });               
  
  }
  

• 获取 JSON 后，将其提供给 OutTable 组件
  <OutTable data={this.state.rows} columns={this.state.cols} tableClassName="ExcelTable2007" tableHeaderRowClass="heading" />

而已 ！完成 ！

可以在此处找到相同的演示

我已经成功地使用xlsx读取 Excel 文件表。只是做这样的事情：

import excel from 'xlsx';
let fileName = "newData.xlsx";
let workbook = excel.readFile(fileName);
console.log(workbook) //should print an array with the excel file data

假设根文件夹中有一个名为“newData.xlsx”的电子表格。然后它只是弄清楚如何访问您想要的数据的问题。 这也应该有帮助。

我正在扩展@AshishDeshpande 答案，我使用了相同的库 react-excel-rendere 如果您有来自后端 api 调用的文件，使用 axios，您可以在下面执行：

如果我们检查来自@AshishDeshpande 的演示代码，

https://github.com/ashishd751/excel-renderer-demo/blob/master/src/App.js

我在 openFileBrowser() 中添加了 fileHandler() 函数，

openFileBrowser = () => {
        
      axios({
        url:'http://127.0.0.1:5000/display',
        method:'GET',
        responseType: 'blob'
      })
      .then((response) => {
                  const url = (new File([response.data], "file.xlsx", {type:"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", lastModified:new Date().getTime()}));

                  console.log(url);
                 
                  let fileName = url.name;
                  console.log(url);
                  
                  //check for file extension and pass only if it is .xlsx and display error message otherwise
                  if(fileName.slice(fileName.lastIndexOf('.')+1) === "xlsx"){
                    this.setState({
                      uploadedFileName: fileName,
                      isFormInvalid: false
                    });
                    this.renderFile(url)
                  }    
                  else{
                    this.setState({
                      isFormInvalid: true,
                      uploadedFileName: ""
                    })
                  }
                 
                  
    })
    }

您可以使用像https://react-dropzone.js.org/这样的库来上传文件，然后使用https://github.com/felixrieseberg/React-Spreadsheet-Component库来显示它。