React 可以在线预览word,pdf,docx格式的文件

React 可以在线预览word,pdf,docx格式的文件，下面往下看

我也不知道为什么要做这个功能，查了百度很久才找到了一个组件、react-file-viewer 下面上代码

---

1、首先使用npm/yarn/cnpm下载这个包

npm install react-file-viewer

2、在组件中引入这个包

//引入这个组件
import FileViewer from 'react-file-viewer';

3、 使用这个组件

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' }}>关闭</Button><div></div><Button onClick={() => {
                                sonstate(false)
                                this.setState({ top: false, file: '' })
                            }}>关闭</Button>
                            </div>
                            {/* 使用这个组件 */}
                            <FileViewer fileType={type}
                                filePath={file}
                                onError={this.onError}
                                errorComponent={Error}
                                unsupportedComponent={Error}
                            />
                        </div>
                    </div>
                </div>
            </div>
        )
    }

3、注意这个组件的使用规则

请注意，此模块最适用于16+反应。如果您使用React <16，则可能需要使用0.5版本。npm install react-file-viewer@0.5.0。

有一个主要的React组件FileViewer，它采用以下道具：

fileTypestring：要显示的资源类型（例如，支持的文件格式之一’png’）。传入不受支持的文件类型将导致显示unsupported file type消息（或自定义组件）。

filePath string：FileViewer显示的资源的url。

onErrorfunction [可选]：在文件查看器获取或呈现所请求资源时出现错误时将调用的函数。您可以在此处传递日志记录实用程序的回调。

errorComponent react元素[可选]：在出现错误时呈现的组件，而不是与react-file-viewer一起打包的默认错误组件。

unsupportedComponent react元素[可选]：在不支持文件格式的情况下呈现的组件。

4.注意这个组件的所支持的格式

• 图像：png，jpeg，gif，bmp，包括360度图像
• PDF格式
• CSV
• XSLX
• DOCX
• 视频：mp4，webm
• 音频：mp3

---

ps:当然大家也可以看这个链接https://www.npmjs.com/package/react-file-viewer