Question

我是新来回应JS的人。我正在尝试使用react.js上载Excel工作表文件并将数据显示到表中。我有来自链接的部分引用，但不完整。请帮忙。 Importing data from excel and displaying in a react component

Answer 1

我已经成功使用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 2

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

Answer 3

您可以使用https://react-dropzone.js.org/之类的库上传文件，然后使用https://github.com/felixrieseberg/React-Spreadsheet-Component该库进行显示。

Answer 4

react-excel-renderer

为此有一个完美的库！它将首先将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" />

就这样！完成了！

可以找到一个相同的演示here

Answer 5

日期时间需要这个

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>

如何使用react.js上传Excel工作表文件并将数据显示到表中

5 个答案:

react-excel-renderer