BomWeb/src/components/FileViewer/index.js

import FileViewer from 'react-file-viewer';
import { Modal } from 'antd';
import { memo } from 'react';

const FileViewerModal = ({ url = '', visible, onCancel }) => {
  const type = url?.split('.')[url?.split('.').length - 1];
  console.log(url, type);
  return (
    <Modal
      title="预览"
      open={visible}
      width={1000}
      onCancel={onCancel}
      onOk={onCancel}
      bodyStyle={{ height: '680px', overflowY: 'hidden' }}
    >
      <FileViewer
        fileType={type}
        filePath={url}
        onError={() => console.log('Failed to load')}
        errorComponent={console.log('出现错误')}
        unsupportedComponent={console.log('不支持')}
      />
    </Modal>
  );
};

export default FileViewerModal;