Reactjs`XMLHttpRequest ()`에서 XLSX 파일을로드하면 이상한 출력이 표시됨

Question

Reactjs create-react-app 프로젝트에서 테스트를 실행했습니다.
SimpleSpreadsheet.xlsx 파일이 올바르게로드되지 않은 이유를 이해할 수 없지만 대신 responsefrom XMLHttpRequest()이 다른 것입니다.

여기 이미지를 보면 responseURLXLSX 파일이 있습니다.

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

파일의 위치 Public는 create-react-app 프로젝트 의 폴더입니다. 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 파일은 다음과 같습니다.

Answer 1

추가하는 것을 잊었 responseType: 'arraybuffer'으므로 이제 정상적으로 작동합니다!

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