javascript - 尝试读取 Excel 文件时 XMLHTTPRequest.response 为 null

Question

嗨，对于很多这方面的新手，我正在尝试使用下面的 typescript 来获取 Excel 文件，然后将其转换为 json 以用作我正在使用的图表的数据源。它在 onload 函数中出现错误，因为我认为 .response = null - readstate = 1 (OPENED) 和 status = 0 (Open 或 Unsent)。不太确定 wjy 它是空的..我读过 readstate 需要 = 4 和 status = 200 (完成打开它)才能工作。但我不知道我该怎么做？

import { Injectable } from '@angular/core';
import { read, IWorkBook, IWorkSheet, utils } from 'ts-xlsx';

@Injectable()
export class OperationDataService {
    oUrl: string;
    xhr: any;
    wb: IWorkBook;
    wbSheet: IWorkSheet;
    arraybuffer: any;
    data: any;
    arr: any;
    bstr: any;

    getData() {
        this.oUrl = './assets/operations.xlsx';
        this.xhr = new XMLHttpRequest();
        this.xhr.open('GET', this.oUrl, true);
        this.xhr.responseType = 'arraybuffer';

        console.log('Service Constructor ' + this.xhr.open + ' - ' + this.xhr.readyState + ' - ' + this.xhr.response + ' - ' + this.xhr.status);

        if (this.xhr.readyState === 4) {

            if (this.xhr.status === 200) {

                this.xhr.onload = function (e) {
                    console.log('in side function');

                    this.arraybuffer = this.xhr.response;

                    console.log('ArrayBuffer ' + this.arraybuffer);

                    /* convert data to binary string */
                    this.data = new Uint8Array(this.arraybuffer);
                    this.arr = new Array();

                    for (let item of this.data) {
                        this.arr[item] = String.fromCharCode(this.data[item]);
                    }

                    this.bstr = this.arr.join('');
                    console.log(this.xhr.responseText);

                    this.wb = read(this.bstr, { type: 'binary' });
                    this.wbSheet = this.wb.Sheets[0];

                    this.objAr = utils.sheet_to_json(this.wbSheet, { header: 1 });
                    console.log(utils.sheet_to_json(this.wbSheet, { header: 1 }));
                    console.log('get data set');

                    return this.objAr;
                };
            }
        }

        this.xhr.send();
    }

}

<小时/>

更新

感谢下面让我使用 javescript 库将 excel 转换为 json - 似乎是 ts-xlsx 依赖项中 JSzip 版本的问题，但 XMLHtpRequest GET 已经工作，我可以在中显示二进制数据浏览器。

import { Injectable } from '@angular/core';
import { read, IWorkBook, IWorkSheet, utils } from 'ts-xlsx';

@Injectable()
export class OperationDataService {
    oUrl: string;
    xhr: any;
    wb: IWorkBook;
    wbSheet: IWorkSheet;
    arraybuffer: any;
    data: any;
    arr: any;
    bstr: any;

    getData() {
        this.oUrl = './assets/operations.xlsx';
        this.xhr = new XMLHttpRequest();
        this.xhr.open('GET', this.oUrl, true);
        this.xhr.responseType = 'arraybuffer';

        this.xhr.addEventListener('load', function() {

                    this.arraybuffer = this.xhr.response;

                    // /* convert data to binary string */
                    this.data = new Uint8Array(this.arraybuffer);
                    this.arr = new Array();

                    for (let i = 0; i !== this.data.length; ++i) {
                    this.arr[i] = String.fromCharCode(this.data[i]);
                    }
                    this.bstr = this.arr.join('');

                    this.wb = read(this.bstr, { type: 'binary' });

                    this.wbSheet = this.wb.Sheets[0];
                    this.objAr = utils.sheet_to_json(this.wbSheet, { header: 1 });

                    return this.objAr;

            }.bind(this));

            this.xhr.send(null);
        }

    }

Answer 1

使用 XMLHttpRequest 加载文件 can be simpler比那:

this.oUrl = './assets/operations.xlsx';
this.xhr = new XMLHttpRequest();
this.xhr.addEventListener("load", function() {
    var arraybuffer = this.response;
    ...
});
this.xhr.open('GET', this.oUrl, true);
this.xhr.responseType = 'arraybuffer';

你也可以按照自己的方式来做，但它应该是这样的:

this.xhr.onreadystatechange =() => {
    if (this.xhr.readyState === 4 && this.xhr.status === 200) {
        this.arraybuffer = this.xhr.response;

    }
}

如果您使用 onload 事件，则无需检查 readyState。
无论如何，您从未真正添加过事件监听器，因为只有在 readyState === 4 和 status === 200 时才添加它，这在您实际发送之前永远不会发生请求。

至于响应，看起来是这样的，因为 xlsx 文件已被压缩。

<小时/>

编辑

如果您将事件监听器函数分配为匿名函数，则该函数正文中的 this 将不是您的对象，而是 XMLHttpRequest 对象，因此应该是:

this.xhr.addEventListener("load", function() {
    var arraybuffer = this.response;
    ...
});

除非你绑定(bind)它:

this.xhr.addEventListener("load", function() {
    var arraybuffer = this.xhr.response;
    ...
}.bind(this));

如果您使用箭头函数，那么 this 将是您的对象:

this.xhr.addEventListener("load",() => {
    var arraybuffer = this.xhr.response;
    ...
});