预览增加图片的放大预览

one_stop_public/filePreview/index.jsx

@@ -4,13 +4,13 @@
 import React, { Component } from 'react';
 import { checkIsImage } from '@/webPublic/one_stop_public/libs/UploadCom';
 import { getModal, getPopconfirm, isFromIframe } from '@/webPublic/one_stop_public/utils/utils';
+import Viewer from 'react-viewer';
 
 // const FileViewer = CLIENT_TYPE === 'mobile' ? null : require('react-file-viewer');
 const FileViewer = null;
 const Modal = getModal();
 const Popconfirm = getPopconfirm();
 
-
 export default class index extends Component {
   constructor(props) {
     super(props);
@@ -29,22 +29,19 @@ export default class index extends Component {
     });
   };
 
-  handleOk = (e) => {
+  handleOk = e => {
     this.setState({
       visible: false,
     });
   };
 
-  handleCancel = (e) => {
+  handleCancel = e => {
     this.setState({
       visible: false,
     });
   };
   download = () => {
-    let {
-      path,
-      pathName
-    } = this.props;
+    let { path, pathName } = this.props;
     if (window?.parent?.open && typeof window.parent.open === 'function') {
       window.parent.open(path, '_blank');
     } else {
@@ -53,12 +50,7 @@ export default class index extends Component {
   };
 
   render() {
-    let {
-      path,
-      pathName,
-      width,
-      height
-    } = this.props;
+    let { path, pathName, width, height } = this.props;
 
     const { visible } = this.state;
     let isShow = false;
@@ -67,7 +59,7 @@ export default class index extends Component {
     if (isImg) {
       isShow = true;
     } else {
-      let find = ['.pdf', '.mp3', '.mp4', '.csv'].find((x) => {
+      let find = ['.pdf', '.mp3', '.mp4', '.csv'].find(x => {
         return pathName.indexOf(x) > -1;
       });
       if (find) {
@@ -88,12 +80,12 @@ export default class index extends Component {
             title="查看附件"
             onConfirm={this.download}
             okText="下载"
-
             onCancel={this.showModal}
-            cancelText={isFromIframe() ? '取消' : '预览'}>
+            cancelText={isFromIframe() ? '取消' : '预览'}
+          >
             {isImg ? (
               <img
-                ref={(node) => {
+                ref={node => {
                   this.imageDom = node;
                 }}
                 style={{
@@ -114,8 +106,7 @@ export default class index extends Component {
             {pathName}
           </a>
         )}
-        {
-          visible &&
+        {visible && (
           <Modal
             title={pathName}
             visible={true}
@@ -123,7 +114,8 @@ export default class index extends Component {
             destroyOnClose
             centered={true}
             onOk={this.handleOk}
-            onCancel={this.handleCancel}>
+            onCancel={this.handleCancel}
+          >
             {type === 'pdf' ? (
               <iframe
                 style={{
@@ -137,25 +129,26 @@ export default class index extends Component {
                 style={{
                   height: 650,
                   maxWidth: 1200,
-                }}>
-                <a onClick={this.download}>
-                  下载文件
-                </a>
-                {
-                  !!checkIsImage(path) &&
-                  <img src={path} style={{ maxWidth: '100%', }}/>
-                }
-                {/*   {FileViewer && (
-                <FileViewer
-                  fileType={type}
-                  filePath={path}
-                />
-              )}*/}
+                }}
+              >
+                {!checkIsImage(path) && <a onClick={this.download}>下载文件</a>}
+
+                {!!checkIsImage(path) && (
+                  <Viewer
+                    visible={true}
+                    onClose={this.handleCancel}
+                    images={[
+                      {
+                        src: path,
+                        alt: '预览',
+                      },
+                    ]}
+                  />
+                )}
               </div>
             )}
           </Modal>
-        }
-
+        )}
       </>
     );
   }