fix: fix uploaded file time error #680 (#690)

### What problem does this PR solve?

fix: fix uploaded file time error #680
feat: support preview of word and excel #684 

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

web/src/pages/document-viewer/index.less

@@ -1,8 +1,13 @@
 .viewerWrapper {
   width: 100%;
+  height: 100%;
   :global {
     .pdf-canvas {
       text-align: center;
     }
   }
+  .image {
+    width: 100%;
+    height: 100%;
+  }
 }

web/src/pages/document-viewer/index.tsx

@@ -1,10 +1,17 @@
+import { ExceptiveType, Images } from '@/constants/common';
 import { api_host } from '@/utils/api';
+import { Flex, Image } from 'antd';
 import FileViewer from 'react-file-viewer';
 import { useParams, useSearchParams } from 'umi';
 import Excel from './excel';
+import Pdf from './pdf';
 
 import styles from './index.less';
 
+// TODO: The interface returns an incorrect content-type for the SVG.
+
+const isNotExceptiveType = (ext: string) => ExceptiveType.indexOf(ext) === -1;
+
 const DocumentViewer = () => {
   const { id: documentId } = useParams();
   const api = `${api_host}/file/get/${documentId}`;
@@ -17,8 +24,14 @@ const DocumentViewer = () => {
 
   return (
     <section className={styles.viewerWrapper}>
-      {ext === 'xlsx' && <Excel filePath={api}></Excel>}
-      {ext !== 'xlsx' && (
+      {Images.includes(ext!) && (
+        <Flex className={styles.image} align="center" justify="center">
+          <Image src={api} preview={false}></Image>
+        </Flex>
+      )}
+      {ext === 'pdf' && <Pdf url={api}></Pdf>}
+      {(ext === 'xlsx' || ext === 'xls') && <Excel filePath={api}></Excel>}
+      {isNotExceptiveType(ext!) && (
         <FileViewer fileType={ext} filePath={api} onError={onError} />
       )}
     </section>

web/src/pages/document-viewer/pdf/index.tsx

@@ -0,0 +1,38 @@
+import { Skeleton } from 'antd';
+import { PdfHighlighter, PdfLoader } from 'react-pdf-highlighter';
+
+interface IProps {
+  url: string;
+}
+
+const DocumentPreviewer = ({ url }: IProps) => {
+  const resetHash = () => {};
+
+  return (
+    <div style={{ width: '100%' }}>
+      <PdfLoader
+        url={url}
+        beforeLoad={<Skeleton active />}
+        workerSrc="/pdfjs-dist/pdf.worker.min.js"
+      >
+        {(pdfDocument) => {
+          return (
+            <PdfHighlighter
+              pdfDocument={pdfDocument}
+              enableAreaSelection={(event) => event.altKey}
+              onScrollChange={resetHash}
+              scrollRef={() => {}}
+              onSelectionFinished={() => null}
+              highlightTransform={() => {
+                return <div></div>;
+              }}
+              highlights={[]}
+            />
+          );
+        }}
+      </PdfLoader>
+    </div>
+  );
+};
+
+export default DocumentPreviewer;