test

src/pages/Detail/FormAndFilesNode.js

@@ -3,7 +3,8 @@ import { Form } from '@ant-design/compatible';
 import { useForm } from 'antd/lib/form/Form';
 import PreviewFile from '@/components/PreviewFile';
 import FileViewerModal from '@/components/FileViewer';
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
+import FileViewer from 'react-file-viewer';
 
 const renderFrom = data => {
   if (!data) return;
@@ -68,6 +69,9 @@ const FormAndFilesNode = ({ title, formData, excelFileData, loading, downloadFil
       ),
     },
   ];
+  const type = useMemo(() => {
+    return exportData?.url?.split('.')[exportData?.url?.split('.').length - 1];
+  }, [exportData]);
   return (
     <>
       {excelFileData && formData && (
@@ -80,15 +84,23 @@ const FormAndFilesNode = ({ title, formData, excelFileData, loading, downloadFil
           </Row>
         </Card>
       )}
-
-      <FileViewerModal
+      <FileViewer
+        key={exportData?.name}
+        fileType={type}
+        filePath={exportData?.url}
+        // onError={() => downloadFile(data)}
+        onError={e => console.error(e)}
+        // errorComponent={<div>文件加载错误</div>}
+        // unsupportedComponent={<div>不支持的文件格式</div>}
+      />
+      {/* <FileViewerModal
         data={exportData}
         visible={excelFileVisible}
         downloadFile={downloadFile}
         onCancel={() => {
           setExcelFileVisible(false);
         }}
-      />
+      /> */}
     </>
   );
 };