使用 React 上传 excel 文件时使用哪个库？答案

【问题标题】：Which library to use for uploading a excel file with React?使用 React 上传 excel 文件时使用哪个库？
【发布时间】：2020-04-30 16:08:36
【问题描述】：

我想我有一个非常基本的 JS 和 React 问题，但我是新手，所以谢谢你的帮助！

我想通过表单上传一个 excel 文件，然后访问列和行中的数据，例如计算第一列中数据的平均值。我应该如何在前端进行此操作？

【问题讨论】：

您是在询问上传 Excel 文件（即将其发送到服务器）还是在本地读取（即在内部使用客户端JS浏览器）。或两者？（在这种情况下，您应该缩小问题的焦点）。另请注意，要求图书馆推荐的问题是题外话。
谢谢@Quentin，我想在浏览器中本地阅读并在那里进行计算。

标签： javascript reactjs

【解决方案1】：

您可以使用 xlsx.js 读取 excel 文件并将它们转换为 json 对象，然后您可以简单地继续处理数据并进行所有计算。

这是在普通 html 文件中完成的。

<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/jszip.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/xlsx.js"></script>
<script>
var ExcelToJSON = function() {

  this.parseExcel = function(file) {
    var reader = new FileReader();

    reader.onload = function(e) {
      var data = e.target.result;
      var workbook = XLSX.read(data, {
        type: 'binary'
      });

      workbook.SheetNames.forEach(function(sheetName) {
        // Here is your object
        var XL_row_object = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName]);
        var json_object = JSON.stringify(XL_row_object);
        console.log(json_object);

      })

    };

    reader.onerror = function(ex) {
      console.log(ex);
    };

    reader.readAsBinaryString(file);
  };
};
</script>

您可以通过将链接直接导入您的反应组件来执行相同的操作。

import "https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/jszip.js";
import "https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/xlsx.js";
...

【讨论】：