从Reactjs的XMLHttpRequest()加载XLSX文件显示奇怪的输出 [英] From Reactjs `XMLHttpRequest()` loading an XLSX file show strange output

问题描述

我从Reactjs create-react-app项目运行了一些测试.
我不明白为什么SimpleSpreadsheet.xlsx文件未正确加载，而XMLHttpRequest()中的response只是其他内容.

I run some test from a Reactjs create-react-app project.
I don't understand why a SimpleSpreadsheet.xlsx file is not loaded correctly but instead the response from XMLHttpRequest() is just something else.

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

Look at the image here the responseURL is an XLSX file in:

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

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

，文件位置是create-react-app项目中的Public文件夹.就像fetch开始然后突然变小一样，因为您看到的response具有类似的XLSX格式

and the location for the file is the Public folder in the create-react-app project. It's like the fetch start then get abrupted since the response as you see does have similar XLSX format

这里是执行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文件如下所示:

The XLSX file looks like this:

推荐答案

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

I forgot to add responseType: 'arraybuffer' so now it work ok!

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

这篇关于从Reactjs的XMLHttpRequest()加载XLSX文件显示奇怪的输出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！