index.jsx 3.7 KB
Newer Older
徐立's avatar
徐立 committed
1 2 3
/**
 * web端文件预览功能
 */
钟是志's avatar
钟是志 committed
4 5
import React, { Component } from 'react';
import { checkIsImage } from '@/webPublic/one_stop_public/libs/UploadCom';
6
import { getModal, getPopconfirm, isFromIframe } from '@/webPublic/one_stop_public/utils/utils';
7
import Viewer from 'react-viewer';
8

9 10
// const FileViewer = CLIENT_TYPE === 'mobile' ? null : require('react-file-viewer');
const FileViewer = null;
11
const Modal = getModal();
12
const Popconfirm = getPopconfirm();
13

徐立's avatar
徐立 committed
14
export default class index extends Component {
15 16 17 18 19
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
    };
20
    this.imageDom = null;
21 22 23
  }

  showModal = () => {
钟是志's avatar
钟是志 committed
24
    if (isFromIframe()) {
25 26
      return false;
    }
27 28 29 30 31
    this.setState({
      visible: true,
    });
  };

32
  handleOk = e => {
33 34 35 36 37
    this.setState({
      visible: false,
    });
  };

38
  handleCancel = e => {
39 40 41 42 43
    this.setState({
      visible: false,
    });
  };
  download = () => {
44
    let { path, pathName } = this.props;
钟是志's avatar
钟是志 committed
45
    if (window?.parent?.open && typeof window.parent.open === 'function') {
46
      window.parent.open(path, '_blank');
钟是志's avatar
钟是志 committed
47
    } else {
48 49
      window.open(path, '_blank');
    }
50
  };
钟是志's avatar
钟是志 committed
51

52
  render() {
53
    let { path, pathName, width, height } = this.props;
54

钟是志's avatar
钟是志 committed
55
    const { visible } = this.state;
56 57 58 59 60 61
    let isShow = false;
    let type;
    let isImg = checkIsImage(pathName);
    if (isImg) {
      isShow = true;
    } else {
62
      let find = ['.pdf', '.mp3', '.mp4', '.csv'].find(x => {
63 64 65 66 67 68
        return pathName.indexOf(x) > -1;
      });
      if (find) {
        isShow = true;
      }
    }
69
    if (isShow) {
70 71 72
      type = pathName.split('.');
      type = Array.isArray(type) && type.length && type[type.length - 1];
    }
钟是志's avatar
钟是志 committed
73

74 75
    // return null;

76 77 78 79
    return (
      <>
        {isShow ? (
          <Popconfirm
钟是志's avatar
钟是志 committed
80
            title="查看附件"
81
            onConfirm={this.download}
钟是志's avatar
钟是志 committed
82
            okText="下载"
83
            onCancel={this.showModal}
84 85
            cancelText={isFromIframe() ? '取消' : '预览'}
          >
86 87
            {isImg ? (
              <img
88
                ref={node => {
钟是志's avatar
钟是志 committed
89 90
                  this.imageDom = node;
                }}
91 92 93 94 95 96 97 98
                style={{
                  width: width ? width : '100px',
                  height: height ? height : 'auto',
                }}
                src={path}
                alt={pathName}
              />
            ) : (
钟是志's avatar
钟是志 committed
99
              <a target="_blank" href={path}>
100 101 102 103 104
                {pathName}
              </a>
            )}
          </Popconfirm>
        ) : (
钟是志's avatar
钟是志 committed
105
          <a target="_blank" href={path}>
106 107 108
            {pathName}
          </a>
        )}
109
        {visible && (
钟是志's avatar
钟是志 committed
110 111 112 113 114 115 116
          <Modal
            title={pathName}
            visible={true}
            width={1200}
            destroyOnClose
            centered={true}
            onOk={this.handleOk}
117 118
            onCancel={this.handleCancel}
          >
钟是志's avatar
钟是志 committed
119 120 121 122 123 124 125 126 127 128 129 130 131
            {type === 'pdf' ? (
              <iframe
                style={{
                  width: '100%',
                  height: 600,
                }}
                src={path}
              />
            ) : (
              <div
                style={{
                  height: 650,
                  maxWidth: 1200,
132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147
                }}
              >
                {!checkIsImage(path) && <a onClick={this.download}>下载文件</a>}

                {!!checkIsImage(path) && (
                  <Viewer
                    visible={true}
                    onClose={this.handleCancel}
                    images={[
                      {
                        src: path,
                        alt: '预览',
                      },
                    ]}
                  />
                )}
钟是志's avatar
钟是志 committed
148 149 150
              </div>
            )}
          </Modal>
151
        )}
152 153 154
      </>
    );
  }
徐立's avatar
徐立 committed
155
}