如何使用 react.js 上传 Excel sheet 文件并将数据显示到 table

Question

我是 React JS 的新手。我正在尝试使用 react.js 执行上传 Excel sheet 文件并将数据显示到 table。我有来自 link 的部分参考，但并不完整。请帮忙。 Importing data from excel and displaying in a react component

Answer 1

你可以使用类似https://react-dropzone.js.org/ to upload files and then use https://github.com/felixrieseberg/React-Spreadsheet-Component库的库来显示它。

Answer 2

我已经成功使用 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' 的电子表格。然后只需弄清楚如何访问您想要的数据即可。 This 应该也有帮助。

Answer 3

反应-excel-渲染器

有一个完美的库可以解决这个问题！它首先将 excel 数据转换为 JSON，然后将其呈现为 HTML table。它被称为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" />

就是这样！完成了！

可以找到相同的演示 here

Answer 4

日期时间需要这个

const parseDate = v => {
  const d = v - 1;
  const t = Math.round((d - Math.floor(d)) * 24 * 60 * 60);
  console.log('parseDate d ', d, 't', t);
  return moment(new Date(1900, 0, d, 0, 0, t)).format('YYYY-MM-DD');
};

const dateStr = parseDate(43523);
console.log('dateStr ', dateStr)

<script src="https://momentjs.com/downloads/moment.js"></script>

Answer 5

我正在扩展@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: ""
                    })
                  }
                 
                  
    })
    }

如何使用 react.js 上传 Excel sheet 文件并将数据显示到 table

How to upload an Excel sheet file using react.js and display data to a table

import-from-excel

reactjs

反应-excel-渲染器