React文件预览,React实现在线预览docx，xslx，pdf格式文件

一、前言

由于项目需要实现文件的预览功能，通过查询百度找到了一个组件，就是react-file-viewer，其官方API中描述可支持文件格式有以下格式：
图片：png，jpeg，gif，bmp，包括360度图片
pdf格式
CSV
xslx
docx
视频：mp4，webm
音频：mp3

但是经过我的测试发现它可以打开docx，xslx格式的文件，pdf格式的文件有时能打开有时打不开的（我刚开始测试的时候pdf格式的文件就一直打不开，但是当项目写完测试的时候发现又能打开pdf格式的文件了）。所以当时开发的时候就选择了用react-pdf-js插件来打开pdf。

二、使用react-file-viewer实现docx，xlsx文件的预览

1.安装react-file-viewe

npm install react-file-viewer

2.组件中引入react-file-viewe

//react文件预览支持docx，xlsx
import FileViewer from 'react-file-viewer';

3.使用

render() {
   
        const {
   type } = this.state;
        return (<React.Fragment>
            <div style={
   {
    display: this.state.fileState }} className={
   styles.filesBox}>
                <div className={
   styles.fileTop}>
                    <span>预览</span>
                    <img className={
   styles.x} src={
   x} onClick={
   this.closeFile.bind(this)} alt="" />
                </div>
                {
   
                    type == 'docx' ?//判断类型是否为docx
                        <div className={
   styles.flieContent}>
                            <FileViewer
                                fileType='docx'//文件类型
                                filePath={
   xiangmu} //文件地址
                            />
                        </div>
                        : type == 'xlsx' ?//判断类型是否为xlsx
                            <div className={
   styles.flieContent}>
                                <FileViewer
                                    fileType='xlsx'//文件类型
                                    filePath={
   ceshi} //文件地址
                                />
                            </div>
                            : ''
                }

            </div>

        </React.Fragment>)
    }

css

.filesBox{
   
    width: 40%;
    height: 86%;
    display: flex;
    left: 25%;
    background: #fff;
    justify-content: center;
    align-items: center;
    position: absolute;
    border