React online preview word, file pdf, docx format, look down below

I do not know why this feature, check the Baidu long time to find a component, the codes react-file-viewer below

1, the first to use npm / yarn / cnpm download this package

npm install react-file-viewer

2, this package is introduced in the assembly

// This component is introduced
import FileViewer from 'react-file-viewer';

3, using this component

render() {
        let { top, file } = this.state;
        let { play, sonstate } = this.props
        var index = file.lastIndexOf(".");
        var type = file.substr(index + 1);
        return (
            <div>
                <div className="top" style={{ display: play ? 'flex' : 'none' }}>
                    <div className="all" >
                        <div className="allname">
                            <div className="topall"><Button style={{ opacity: '0' }}>shut down</Button><div></div><Button onClick={() => {
                                sonstate(false)
                                this.setState({ top: false, file: '' })
                            }}>shut down</Button>
                            </div>
                            {/ * Use of this component * /}
                            <FileViewer fileType={type}
                                filePath={file}
                                onError={this.onError}
                                errorComponent={Error}
                                unsupportedComponent={Error}
                            />
                        </div>
                    </div>
                </div>
            </div>
        )
    }

3, pay attention to the use of this rule component

Note that this module is most suitable for 16+ reaction. If you are using React <16, you may need to use the 0.5 version. npm install [email protected].

There is a major component of React FileViewer, which uses the following items:

fileTypestring: resource type to be displayed (for example, one file format support 'png'). Incoming unsupported file types will result in displays unsupported file type messages (or custom components).

filePath string: url resources FileViewer displayed.

onErrorfunction [Optional]: Gets or rendering function that will be called when an error occurs when the requested resource in the file viewer. You can pass callback logging utility here.

errorComponent react element [Optional]: Component presented when an error occurs, rather than the default error component and react-file-viewer packaged together.

unsupportedComponent react element [Optional]: Components presented in the case do not support the file format.

4. Note that this component supported formats

• Image: png, jpeg, gif, bmp, 360 of the image comprising
• PDF format
• CSV
• XSLX
• DOCX
• Video: mp4, webm
• Audio: mp3

ps: of course, you can look at this linkhttps://www.npmjs.com/package/react-file-viewer