读取 React 应用程序的 src 文件夹中的 excel答案

【问题标题】：Read excel that is in the src folder of React app读取 React 应用程序的 src 文件夹中的 excel
【发布时间】：2022-01-12 13:00:17
【问题描述】：

我使用react CLI 创建了一个反应应用程序。

我现在创建了一个名为data 的文件夹，现在我想使用xlsx npm 包读取该数据。但是，它不起作用。我认为这可能与我引用 excel 文件的方式有关，因为我收到一个警告，因为“'string' 类型上不存在属性 'Sheets'”（下图）

我认为阅读 Excel 会很容易（这也是本地的），但我无法弄清楚。任何人都可以帮忙吗？我查看了很多与此相关的 SO 问题，但没有成功。

我的代码

import "./App.css";
import XLSX from "xlsx";

let fileName = "./data/menu.xlsx";
var first_worksheet = fileName.Sheets[fileName.SheetNames[0]];
var data = XLSX.utils.sheet_to_json(first_worksheet, { header: 1 });
console.log(fileName);

【问题讨论】：

标签： reactjs excel xlsx

【解决方案1】：

您的fileName 现在只是一个包含您路径的字符串。您实际上还没有将其解析为 Excel 工作表，因此其上不存在 Sheets 属性。

您需要从文件系统中实际读取文件，然后使用 XLSX 将其解析为可用于以编程方式与之交互的格式。由于您使用的是 react，因此您可以查看 the react examples in the XLSX repo 以了解如何进行操作。但是，包含的演示仅涵盖 react-native 应用程序，因此您可能还想开始研究从浏览器检索和解析本地文件系统上的文件的方法，例如 FileReader 和 fetch。然后，一旦将文件加载到内存中，就可以调用 XLSX.read(file) 将其完全解释为 Excel 工作表。

【讨论】：

感谢您的回答，但我仍然能够弄清楚如何在 src 文件夹中的文件上使用FileReader。我发现的所有示例都有一个触发 Excel 解析的事件（input 元素或onClick 或onChange）。就我而言，我只想在加载页面时读取 excel，我找不到任何示例。尽管如此，还是对您的答案进行了投票以寻求指导。如果您遇到任何适合我需要的示例，请告诉我。

【解决方案2】：

我在这里找到了我的问题的答案Excel to JSON javascript code?

对我有用的答案是来自 user7456320 的答案（代码也在下面复制）。

所需要的只是 XLSX 库。我在我的 react 组件中使用下面的代码和 useEffect 钩子在页面加载时运行一次。

<!doctype html>
<html>

<head>
    <title>Excel to JSON Demo</title>
    <script src="xlsx.full.min.js"></script>
</head>

<body>

    <script>
        /* set up XMLHttpRequest */
        var url = "http://myclassbook.org/wp-content/uploads/2017/12/Test.xlsx";
        var oReq = new XMLHttpRequest();
        oReq.open("GET", url, true);
        oReq.responseType = "arraybuffer";

        oReq.onload = function(e) {
            var arraybuffer = oReq.response;

            /* convert data to binary string */
            var data = new Uint8Array(arraybuffer);
            var arr = new Array();
            for (var i = 0; i != data.length; ++i) arr[i] = String.fromCharCode(data[i]);
            var bstr = arr.join("");

            /* Call XLSX */
            var workbook = XLSX.read(bstr, {
                type: "binary"
            });

            /* DO SOMETHING WITH workbook HERE */
            var first_sheet_name = workbook.SheetNames[0];
            /* Get worksheet */
            var worksheet = workbook.Sheets[first_sheet_name];
            console.log(XLSX.utils.sheet_to_json(worksheet, {
                raw: true
            }));
        }

        oReq.send();
    </script>
</body>
</html>

【讨论】：