文件下载修改

src/components/FileViewer/index.js

@@ -1,21 +1,25 @@
 import FileViewer from 'react-file-viewer';
 import { Modal, Spin } from 'antd';
-import { memo } from 'react';
+import { memo, useMemo } from 'react';
 
 const FileViewerModal = ({ data, visible, onCancel, downloadFile }) => {
-  const type = data?.url?.split('.')[data?.url?.split('.').length - 1];
+  const type = useMemo(() => {
+    if (!data || !data.url) return '';
+    let url = data.url || '';
+    let arr = url.split('.');
 
-  return (
-    <Modal
-      destroyOnClose
-      title="预览"
-      visible={visible}
-      width={1000}
-      footer={null}
-      onCancel={onCancel}
-      bodyStyle={{ height: '680px', overflowY: 'hidden' }}
-    >
-      {data?.url && (
+    return arr[arr.length - 1];
+  }, [data?.url]);
+
+  const renderContent = () => {
+    if (type == 'xlsx') {
+      return (
+        <div>
+          不支持的文件格式点击<a onClick={() => downloadFile(data)}>下载</a>
+        </div>
+      );
+    } else if (data?.url) {
+      return (
         <FileViewer
           key={data?.name}
           fileType={type}
@@ -32,7 +36,21 @@ const FileViewerModal = ({ data, visible, onCancel, downloadFile }) => {
             </div>
           )}
         />
-      )}
+      );
+    }
+  };
+
+  return (
+    <Modal
+      destroyOnClose
+      title="预览"
+      visible={visible}
+      width={1000}
+      footer={null}
+      onCancel={onCancel}
+      bodyStyle={{ height: '680px', overflowY: 'hidden' }}
+    >
+      {renderContent()}
     </Modal>
   );
 };