读取 Excel (xlsx) 中的文件数据时出现问题 JavaScript/SAPUI5

Question

我正在尝试使用 FileReader api 在我的 SAPUI5 应用程序中读取 .xlsx 文件。我用来上传文件的 UI5 控件是 sap.ui.unified.FileUploader 我的要求是读取 Excel sheet 的内容并在我的 UI5 应用程序中的 table 中显示其数据。

为此，我创建了一个 FileReader 实例并调用其 .readAsBinaryString 或 .readAsText 方法并将我的文件传递给它。读取内容时，在onload事件内部，文件内容以不可读格式显示（参考下文）

我错过了什么吗？或者是否有不同的方式读取 Excel 数据？

Answer 1

您需要在客户端或服务器端解析 Excel 文件。 Excel 个文件不是纯文本。旧 excel 文件 (xls) 没有 Excel 就无法解析，它有自己的二进制格式。但是你可以解析 xlsx 文件，这些是压缩的多个文件，其中包含原始数据、图像和样式文件。

您可以使用现有的 js 库进行客户端解析，示例 post How to parse Excel file in Javascript/HTML5。
您可以将 abap2xlsx 库用于 ABAP 后端。

Answer 2

感谢mkysoft's and this回答。我能够读取 .xlsx 文件内容。

为此，我必须在我的项目中创建两个文件 jszip.js 和 xlsx.js。我为他们创建了一个单独的文件夹，并在我的控制器的 sap.ui.define 部分提到了这两个文件的位置。

这两个库可在 CDNJS - JSZip 3 和 CDNJS - XLSX 4 个位置。

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    .... //other libraries
    "projectnamespace/foldername/jszip",
    "projectnamespace/foldername/xlsx"
], function (Controller,...., jszip, xlsx)

然后，为了读取 .xlsx 文件，我添加了以下代码：

    var oFileUploader = sap.ui.getCore().byId("fileUploader"); // get the sap.ui.unified.FileUploader
    var file = oFileUploader.getFocusDomRef().files[0]; // get the file from the FileUploader control
    if (file && window.FileReader) {
        var reader = new FileReader();
        reader.onload = function (e) {
            var data = e.target.result;
            var excelsheet = XLSX.read(data, {
                type: "binary"
            });
            excelsheet.SheetNames.forEach(function (sheetName) {
                var oExcelRow = XLSX.utils.sheet_to_row_object_array(excelsheet.Sheets[sheetName]); // this is the required data in Object format
                var sJSONData = JSON.stringify(oExcelRow); // this is the required data in String format
            });
        };
        reader.readAsBinaryString(file);
    }

读取 Excel (xlsx) 中的文件数据时出现问题 JavaScript/SAPUI5

Issue in Reading Excel (xlsx) File Data in JavaScript/SAPUI5

javascript

sapui5