从Reactjs的XMLHttpRequest加载XLSX文件显示奇怪的输出

问题描述

我从Reactjs create-react-app项目运行一些测试。
我不明白为什么未正确加载SimpleSpreadsheet.xlsx文件，而是从response到XMLHttpRequest()的情况。

在这里查看图像responseURL是XLSX文件，位于：

'http：// localhost：6545 / images / weeks / 1 / SimpleSpreadsheet.xlsx'

，文件位置在create-react-app项目中的Public文件夹中。就像fetch一样，然后由于您看到的response具有类似的XLSX格式而变得突然

这里是执行fetch的组件：

import React,{ Component } from 'react';
import Error from './error';
import Loading from './loading';

function WithFetching(WrappedComponent) {
    return class FetchComponent extends Component {
        constructor(props) {
            // eslint-disable-line no-shadow
            super(props);
            this.state = {};
            this.xhr = this.createRequest(props.newProps.filePath);
        }

        componentDidMount() {
            try {
                this.fetch();
            } catch (e) {
                if (this.props.onError) {
                    this.props.onError(e);
                }
                this.setState({ error: 'fetch error' });
            }
        }

        componentwillUnmount() {
            this.abort();
        }

        createRequest(path) {
            let xhr = new XMLHttpRequest();

            if ('withCredentials' in xhr) {
                // XHR for Chrome/Firefox/Opera/Safari.
                xhr.open('GET',path,true);
                // } else if (typeof XDomainRequest !== 'undefined') {
                //  // XDomainRequest for IE.
                //  xhr = new XDomainRequest();
                //  xhr.open('GET',path);
            } else {
                // CORS not supported.
                xhr = null;
                return null;
            }
            if (this.props.responseType) {
                xhr.responseType = this.props.responseType;
            }

            xhr.onload = () => {
                if (xhr.status >= 400) {
                    this.setState({ error: `fetch error with status ${xhr.status}` });
                    return;
                }
                const resp = this.props.responseType ? xhr.response : xhr.responseText;

                this.setState({ data: resp });
            };

            return xhr;
        }

        fetch() {
            this.xhr.send();
        }

        abort() {
            if (this.xhr) {
                this.xhr.abort();
            }
        }

        render() {
            if (!this.xhr) {
                return <h1>CORS not supported..</h1>;
            }

            if (this.state.error) {
                return <Error {...this.props} error={this.state.error} />;
            }

            if (this.state.data) {
                return <WrappedComponent data={this.state.data} {...this.props} />;
            }
            return <Loading />;
        }
    };
}

export default WithFetching;

XLSX文件如下所示：

解决方法

我忘记添加responseType: 'arraybuffer'，所以现在可以正常使用了！

let xhr = new XMLHttpRequest();
if (this.props.newProps.responseType) {
        xhr.responseType = this.props.newProps.responseType;
}