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

【问题标题】：How to upload an Excel sheet file using react.js and display data to a table如何使用 react.js 上传 Excel 工作表文件并将数据显示到表格中
【发布时间】：2018-06-28 13:40:08
【问题描述】：

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

【问题讨论】：

查看此链接stackoverflow.com/questions/46909260/…

标签： reactjs import-from-excel

【解决方案1】：

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

【讨论】：

这太棒了！是否支持从文档中的多张纸读取数据？
如果我从后端 api 调用中获取一个 excel 文件然后在前端渲染，有什么办法吗？在您的示例中，我检查了它是否适用于您从文件浏览器中选择文件时。
@tejesh：只要你能得到文件blob，无论是从文件浏览器还是后端api，都是可能的。
@sachin : 如果你的意思是工作簿，那么不，目前它只支持单个工作簿。
@AshishDeshpande 谢谢！我做了一些解决方法并修改了您的示例。现在它工作正常。我创建了文件对象而不是 blob，然后将该对象直接传递给 filerender 函数。

【解决方案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 也应该有帮助。

【讨论】：

我在控制台中收到此错误：未捕获的 TypeError: _fs.readFileSync is not a function
回首往事，我认为这只适用于 Node 或其他一些服务器端部署。如果你想在浏览器中使用 XLSX，你必须使用 FileReader

【解决方案3】：

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

【讨论】：

可以更新为：axios.get("/display", { //url:'http://127.0.0.1:5000/display', method:'GET', responseType: 'blob' })，那么需要在package.json中添加“proxy”：“127.0.0.1:5000”

【解决方案4】：

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

【讨论】：

但是我们究竟如何使用 react dropzone 库“读取”和保存数据？ stackoverflow.com/questions/68069700/…

【解决方案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)

&lt;script src="https://momentjs.com/downloads/moment.js"&gt;&lt;/script&gt;

【讨论】：