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

Posted 2023-05-07

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

【英文标题】：How to upload an Excel sheet file using react.js and display data to a table

【发布时间】：2018-06-28 13:40:08

【问题描述】：

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

【问题讨论】：

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

【参考方案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 库“读取”和保存数据？ ***.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)

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