mh_jy_safe_web/src/components/common/FileViewerShow.js

import React from 'react';
import config from "../../config";
import { connect } from 'dva';
import { checkImg } from "../../utils/common";
import FileViewer from 'react-file-viewer';

//传入附件提供查看功能
//弹窗  listFiles  showFile 多附件与单附件查看
class FileViewerShow extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            idRadim: '',
            isPageCenter: true,
            data: []
        }
    };
    componentDidMount() {
        if (this.props.data?.listFiles || this.props.data?.showFile)
            this.initInfo(this.props.data);
    }

    componentWillReceiveProps(NextProps) {
        if (NextProps.data?.key && this.props.data?.key != NextProps.data?.key) {
            if (NextProps.data?.listFiles || NextProps.data?.showFile) {
                this.initInfo(NextProps.data);
            }
        }
    }

    initInfo(paramInt) {
        if (!paramInt.listFiles && paramInt.showFile) {
            paramInt.listFiles = []
            paramInt.listFiles.push(paramInt.showFile)
        }
        if (paramInt.listFiles && paramInt.listFiles.length > 0) {
            var isPageCenter = true
            var fileName = paramInt.listFiles[0].Nav_ImgFile.FILE_NAME
            if (fileName.indexOf('.doc') > -1 || fileName.indexOf('.docx') > -1 || fileName.indexOf('.xls') > -1 || fileName.indexOf('.xlsx') > -1) {
                isPageCenter = false
            }
            this.setState({
                data: paramInt.listFiles,
                isPageCenter: isPageCenter
            });
        } else {
            //去数据库查找对应的信息
            //暂时不处理
        }
    }
    //显示附件查看
    showFilesView = (listFile, imgHost) => {//FileViewer,
        var result = []
        if (listFile == null || listFile.length < 1) {
            return result
        }
        var listfilesPath = []
        var listfilesType = []
        var listfilesIsImage = []
        var percent = 0.75
        if (window.screen.height < 1000) {
            percent = 0.65
        }
        var height = window.screen.height * percent

        listFile.forEach(e => {
            listfilesIsImage.push(checkImg(e.Nav_ImgFile.FILE_NAME))
            listfilesPath.push(e.Nav_ImgFile.FILE_PATH)
            if (e.Nav_ImgFile.FILE_TYPE.indexOf('application/msword') > -1 || e.Nav_ImgFile.FILE_TYPE.indexOf('application/vnd.openxmlformats-officedocument') > -1 || e.Nav_ImgFile.FILE_TYPE.indexOf('application/vnd.ms-excel') > -1 || e.Nav_ImgFile.FILE_TYPE.indexOf('application/vnd.openxmlformats') > -1 || e.Nav_ImgFile.FILE_TYPE.indexOf('application/xml') > -1 || e.Nav_ImgFile.FILE_TYPE.indexOf('text/') > -1) {
                listfilesType.push(e.Nav_ImgFile.FILE_PATH.split('.')[1])
            } else {
                listfilesType.push(e.Nav_ImgFile.FILE_TYPE.split('/')[1])
            }
        });

        if (listfilesPath == null || listfilesPath.length < 1)
            return result

        // mozilla/5.0 (windows nt 10.0; win64; x64) applewebkit/537.36 (khtml, like gecko) chrome/130.0.0.0 safari/537.36 edg/130.0.0.0 
        // mozilla/5.0 (windows nt 10.0; win64; x64) applewebkit/537.36 (khtml, like gecko) chrome/109.0.0.0 safari/537.36 
        // mozilla/5.0 (windows nt 10.0; win64; x64) applewebkit/537.36 (khtml, like gecko) chrome/122.0.6261.95 safari/537.36
        var ua = navigator.userAgent.toLowerCase();
        var isShowdox = true
        if (ua.indexOf('edg') > -1) {
            isShowdox = false
        }
        //  显示思路   图片 img  txt iframe   文件 FileViewer     其他 a
        listfilesPath.forEach((item, i) => {
            try {
                result.push(<div style={{ width: '100%', fontSize: 'xx-large', marginBottom: '20px', textAlign: 'center' }}  > <a key={i} style={{ color: '##1890ff' }} target="_blank" href={imgHost + listfilesPath[i]}>{listFile[i].Nav_ImgFile.FILE_NAME}</a ></div>)
                if (listfilesIsImage[i] == true) {
                    result.push(<a key={i} href={imgHost + listfilesPath[i]} target='_blank' ><img style={{ margin: "0 0 0 5px", maxHeight: height }} src={imgHost + listfilesPath[i]} /></a>)
                } else if (listfilesType[i] == 'txt' || listfilesType[i] == 'json' || (isShowdox && listfilesType[i] == 'doc')) {
                    result.push(<div style={{ height: height - 85 }} ><iframe key={i} style={{ height: height - 95, marginLeft: '2%', width: '96%' }} src={imgHost + listfilesPath[i]} ></iframe></div >) //360 浏览器支持 doc  edge 对word 兼容性差 需要下载还不会自动加载
                } else if (listfilesType[i] == 'pdf' || listfilesType[i] == 'csv' || listfilesType[i] == 'docx' || listfilesType[i] == 'xls' || listfilesType[i] == 'xlsx' || listfilesType[i] == 'mp4' || listfilesType[i] == 'mp3' || listfilesType[i] == 'webm') {
                    // result.push(<FileViewer key={i} style={{ height: height, width: '100%' }} fileType={listfilesType[i]} filePath={imgHost + listfilesPath[i]} />)  //onError={handleError}  onError={（）=>{this.onError()}} 
                    result.push(<div style={{ height: height - 80 }} > <FileViewer key={i} style={{ height: height - 90 }} fileType={listfilesType[i]} filePath={imgHost + listfilesPath[i]} errorComponent={() => <div>附件加载失败！</div>} /></div>)  //onError={handleError}  onError={（）=>{this.onError()}}   style={{ height: height - 100 }}
                } else {
                    result.splice(0, 1)
                    result.push(<a key={i} target="_blank" href={imgHost + listfilesPath[i]}>{listFile[i].Nav_ImgFile.FILE_NAME}</a>)
                }
            } catch (error) {
            }
        })
        return result
    }

    handleError = () => {
        debugger
    }

    render() {
        const { data, isPageCenter } = this.state;
        return (
            <div style={{ padding: '10px', minHeight: '500px', textAlign: (isPageCenter ? 'center' : 'left') }}>
                {
                    data ? this.showFilesView(data, config.picServerHost) : null
                }
                <div style={{ color: 'lightgray', size: '9px', position: 'absolute', bottom: '10px', left: '20px' }}>如果预览效果不好，请检查浏览器版本不要太低，或者切换别的浏览器，点击标题可以下载对应附件。</div>
            </div>
        )
    }
}
export default connect(({ login, app }) => ({ login, app }))(FileViewerShow);