如何使用 js-xlsx 从 HTML 输入读取文件？

Question

我有一个 angular 应用程序，我试图借助 js-xlsx JavaScript 库读取和解析 .xlsx 文件。但是我在 JavaScript 端打开文件时遇到问题。

在我的 html 上，我有一个简单的文件类型输入，可以打开一个文件选择器，用户可以在其中选择合适的文件。我在使用 angular 指令将文件发送到控制器上的函数时遇到了问题，因为当用户仅在按下输入按钮时选择文件时，ng-change 不会更新。我最终不得不通过在我的输入中添加 'onchange="angular.element(this).scope().handleFile(this)"' 来混合使用普通的旧 JavaScript 和一些 angular。

添加-quotation.html:

<div class="container-fluid" ng-controller="addQuotationController">
...  
<input type="file" id="file" class="" onchange="angular.element(this).scope().handleFile(this)">
...
</div>

这解决了我无法将文件从 HTML 发送到 JavaScript 端的问题。但是，我无法打开文件。我已经尝试了官方文档中的许多示例，但我没有成功地使其工作。这是我当前的代码：

添加-quotation.component.js:

$scope.handleFile = function(e) {
    var files = e.target.files;
    var i,f;
    for (i = 0, f = files[i]; i != files.length; ++i) {
        var reader = new FileReader();
        var name = f.name;
        reader.onload = function(e) {
            var data = e.target.result;

            var workbook = XLSX.read(data, {type: 'binary'});

            /* DO SOMETHING WITH workbook HERE */
        };
        reader.readAsBinaryString(f);
    }
}

我尝试调试，发现该文件确实进入了该方法，但在尝试访问时出现异常 "e.target.files;"

我完全不知道如何解决这个问题，我看到的例子也没有帮助。我做错了什么？

Answer 1

您正在寻找错误的对象，而您应该使用 e.files。这是因为 e 表示 <input> 元素；也就是 onchange 属性中 this 的值：onchange="angular.element(this).scope().handleFile(this)"

$scope.handleFile = function(e) {

 console.log(e.files);
 var files = e.files;
 var i,f;
 for (i = 0, f = files[i]; i != files.length; ++i) {
    var reader = new FileReader();
    var name = f.name;
    reader.onload = function(e) {
        var data = e.target.result;

        var workbook = XLSX.read(data, {type: 'binary'});

        /* DO SOMETHING WITH workbook HERE */
    };
    reader.readAsBinaryString(f);
}

}

如何使用 js-xlsx 从 HTML 输入读取文件？

How can I read a file from an HTML input with js-xlsx?

html

javascript

file-upload

angularjs

js-xlsx