增加 docx xlsx 预览

README.md

@@ -6,48 +6,48 @@
 
 找到 import { useDispatch } from "react-redux";
 
-按住 Ctrl 点击 useDispatch 出来 useDispatch.d.ts类型声明文件
-（路径node_modules>react-redux>es>hooks>useDispatch.d.ts）
+按住 Ctrl 点击 useDispatch 出来 useDispatch.d.ts 类型声明文件
+（路径 node_modules>react-redux>es>hooks>useDispatch.d.ts）
 
 找到最后面的 AnyAction，按住 Ctrl 点击 进入
-（路径node_modules>redux>index.d.ts）
+（路径 node_modules>redux>index.d.ts）
 
 找到
 export interface Action<T = any> {
-  type: T
+type: T
 }
 
-在type后面加一个 ?   即=>
+在 type 后面加一个 ? 即=>
 
 export interface Action<T = any> {
-  type?: T
+type?: T
 }
 
+2.添加了 antd 的 UploadFile 类型 声明
 
-
-
-2.添加了antd的 UploadFile 类型 声明
-
-找到   const [fileList, setFileList] = useState<UploadFile[]>([]);
+找到 const [fileList, setFileList] = useState<UploadFile[]>([]);
 
 按住 Ctrl 点击 UploadFile 进入
-（路径node_modules>antd>es>upload>interface.d.ts）
-
+（路径 node_modules>antd>es>upload>interface.d.ts）
 
 在第 12 行 添加一个自定义类型声明：
 
 type SelectType = {
-    id: number;
-    value: number | undefined;
-    txt: string;
-    tit: string;
-    fileName: string;
-    resName:string
-  };
+id: number;
+value: number | undefined;
+txt: string;
+tit: string;
+fileName: string;
+resName:string
+};
 
 export interface UploadFile<T = any> extends ProgressAriaProps {
-    .....（上面自带的不用管，把 SelectType 加到最下面即可）
-    mySelect:SelectType
+.....（上面自带的不用管，把 SelectType 加到最下面即可）
+mySelect:SelectType
 }
 
-如果还不能解决请联系：邵根-18702025090
+如果还不能解决请联系：邵根-18702025090
+
+
+3.插件问题
+npm --registry https://registry.npmjs.org/ install react-file-viewer --force

package.json

@@ -18,6 +18,7 @@
     "js-base64": "^3.7.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-file-viewer": "^1.2.1",
     "react-redux": "^8.0.4",
     "react-router-dom": "5.3",
     "react-scripts": "5.0.1",

src/App.tsx

@@ -12,8 +12,10 @@ import store, { RootState } from "./store";
 import UpAsyncLoding from "./components/UpAsyncLoding";
 import MessageCom from "./components/Message";
 import LookDom from "./components/LookDom";
+import FileLookCom from "./components/FileLookCom";
 const Layout = React.lazy(() => import("./pages/Layout"));
 const Login = React.lazy(() => import("./pages/Login"));
+const Test = React.lazy(() => import("./pages/Test"));
 
 export default function App() {
   // 从仓库中获取查看图片的信息
@@ -28,6 +30,7 @@ export default function App() {
         <React.Suspense fallback={<SpinLoding />}>
           <Switch>
             {/* 测试页面 */}
+            <Route path="/test" component={Test} />
             <Route path="/login" component={Login} />
             <AuthRoute path="/" component={Layout} />
           </Switch>
@@ -60,6 +63,9 @@ export default function App() {
 
       {/* antd 轻提示 ---兼容360浏览器 */}
       <MessageCom />
+
+      {/* 预览 ppt,doc,Excel使用插件 */}
+      <FileLookCom />
     </>
   );
 }

src/components/FileLookCom/index copy.txt

@@ -0,0 +1,72 @@
+// import React, { useEffect } from "react";
+// import styles from "./index.module.scss";
+// import { useSelector } from "react-redux";
+// import store, { RootState } from "@/store";
+// import { CloseOutlined } from "@ant-design/icons";
+
+// import jsPreviewDocx from "@js-preview/docx";
+// import "@js-preview/docx/lib/index.css";
+
+// function FileLookCom() {
+//   const { fileLookUrl } = useSelector((state: RootState) => state.A0Layout);
+
+//   useEffect(() => {
+//     const nameRes = fileLookUrl.name;
+
+//     const arr1 = [".doc", ".docx"];
+//     arr1.forEach((v) => {
+//       if (nameRes.toLowerCase().endsWith(v)) {
+//         const myDocxPreviewer = jsPreviewDocx.init(
+//           document.querySelector(".FileLookComDoc")!
+//         );
+//         myDocxPreviewer
+//           .preview(fileLookUrl.url )
+//           .then((res) => {
+//             console.log("预览完成");
+//           })
+//           .catch((e) => {
+//             console.log("预览失败", e);
+//           });
+//       }
+//     });
+
+//     const arr2 = [".ppt", ".pptx"];
+//     arr2.forEach((v) => {
+//       if (nameRes.toLowerCase().endsWith(v)) {
+//       }
+//     });
+
+//     const arr3 = [".xls", ".xlsx"];
+//     arr3.forEach((v) => {
+//       if (nameRes.toLowerCase().endsWith(v)) {
+//       }
+//     });
+//   }, [fileLookUrl]);
+
+//   return (
+//     <>
+//       {fileLookUrl.url ? (
+//         <div className={styles.FileLookCom}>
+//           {/* 关闭按钮 */}
+//           <div
+//             className="FileLookClose"
+//             onClick={() =>
+//               store.dispatch({
+//                 type: "layout/fileLookUrl",
+//                 payload: { url: "", name: "" },
+//               })
+//             }
+//           >
+//             <CloseOutlined rev={undefined} />
+//           </div>
+
+//           <div className="FileLookComDoc"></div>
+//         </div>
+//       ) : null}
+//     </>
+//   );
+// }
+
+// const MemoFileLookCom = React.memo(FileLookCom);
+
+// export default MemoFileLookCom;

src/components/FileLookCom/index.module.scss

@@ -0,0 +1,40 @@
+.FileLookCom {
+  position: fixed;
+  z-index: 10010;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: black;
+  // overflow-y: auto;
+
+  :global {
+
+    .FileLookClose {
+      position: fixed;
+      z-index: 10;
+      top: 50px;
+      right: 40px;
+      width: 40px;
+      height: 40px;
+      background-color: rgba(0, 0, 0, .6);
+      border-radius: 50%;
+      color: #fff;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+      font-weight: 700;
+      font-size: 24px;
+    }
+
+    .FileLookComDoc {
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+
+    }
+
+
+  }
+}

src/components/FileLookCom/index.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import styles from "./index.module.scss";
+import FileViewer from "react-file-viewer";
+import { useSelector } from "react-redux";
+import store, { RootState } from "@/store";
+import { CloseOutlined } from "@ant-design/icons";
+
+function FileLookCom() {
+  const { fileLookUrl } = useSelector((state: RootState) => state.A0Layout);
+
+  return (
+    <>
+      {fileLookUrl.url ? (
+        <div className={styles.FileLookCom}>
+          {/* 关闭按钮 */}
+          <div
+            className="FileLookClose"
+            onClick={() =>
+              store.dispatch({
+                type: "layout/fileLookUrl",
+                payload: { url: "", name: "" },
+              })
+            }
+          >
+            <CloseOutlined rev={undefined} />
+          </div>
+
+          <FileViewer
+            fileType={fileLookUrl.name.replace(".", "")}
+            filePath={fileLookUrl.url}
+            // onError={}
+            // errorComponent={console.log("出现错误")}
+            // unsupportedComponent={console.log("不支持")}
+          />
+        </div>
+      ) : null}
+    </>
+  );
+}
+
+const MemoFileLookCom = React.memo(FileLookCom);
+
+export default MemoFileLookCom;

src/pages/A1Project/index.module.scss

@@ -36,12 +36,12 @@
       overflow: hidden;
 
       .ant-table-body {
-        height: 550px;
+        height: 575px;
         overflow-y: auto !important;
 
         .ant-table-row {
           .ant-table-cell {
-            padding: 10px;
+            padding: 8px;
           }
         }
       }

src/pages/A1Project/index.tsx

@@ -215,6 +215,7 @@ function A1Project() {
     }
 
     arr.push({
+      width: 130,
       title: "存在待审批文件",
       render: (item: A1TableType) => (item.hasAuditStatus ? "是" : "否"),
     });
@@ -433,7 +434,7 @@ function A1Project() {
       {/* 表格主体 */}
       <div className="A1tableBox">
         <Table
-          scroll={{ y: 550 }}
+          scroll={{ y: 575 }}
           dataSource={tableInfo.list}
           columns={columns}
           rowKey="id"

src/pages/Test/index.module.scss

@@ -0,0 +1,5 @@
+.Test{
+  :global{
+    
+  }
+}

src/pages/Test/index.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import styles from "./index.module.scss";
+
+
+function Test() {
+  return (
+    <div className={styles.Test}>
+      调试页面
+    </div>
+  );
+}
+
+const MemoTest = React.memo(Test);
+
+export default MemoTest;

src/store/reducer/layout.ts

@@ -1,6 +1,11 @@
 import { LookDomType } from "@/types";
 import { MessageType } from "@/utils/message";
 
+type FileLookUrlType = {
+  url: string;
+  name: string;
+};
+
 // 初始化状态
 const initState = {
   // 所有图片点击预览查看大图
@@ -25,6 +30,12 @@ const initState = {
     fu: () => {},
     state: false,
   },
+
+  // 查看 doc ppt xls 等附件
+  fileLookUrl: {
+    url: "",
+    name: "",
+  } as FileLookUrlType,
 };
 
 // 定义 action 类型
@@ -38,7 +49,8 @@ type LayoutActionType =
         fu: () => void;
         state: boolean;
       };
-    };
+    }
+  | { type: "layout/fileLookUrl"; payload: FileLookUrlType };
 
 // 频道 reducer
 export default function layoutReducer(
@@ -59,6 +71,9 @@ export default function layoutReducer(
     // 上传文件点击取消
     case "layout/closeUpFile":
       return { ...state, closeUpFile: action.payload };
+    // 查看 doc ppt xls 等附件
+    case "layout/fileLookUrl":
+      return { ...state, fileLookUrl: action.payload };
     default:
       return state;
   }

src/types/declaration.d.ts

@@ -5,4 +5,5 @@ declare module "*.jpg";
 declare module "*.gif";
 declare module "*.svg";
 declare module "js-export-excel";
+declare module "react-file-viewer";
 declare module 'braft-utils';

src/utils/authFilesLook.ts

@@ -6,7 +6,7 @@ import { baseURL } from "./http";
 export const urlChangeFu = async (
   url: string,
   flag: boolean,
-  type?: "img" | "video" | "audio" | "pdf",
+  type?: "img" | "video" | "audio" | ".pdf" | ".txt" | ".docx" | ".xlsx",
   name?: string
 ) => {
   // flag true 为 生成 a标签 下载
@@ -34,7 +34,7 @@ export const urlChangeFu = async (
             show: true,
           },
         });
-      } else if (type === "pdf") {
+      } else if (type === ".pdf" || type === ".txt") {
         window.open(srcRes);
       } else if (type === "audio" || type === "video") {
         store.dispatch({
@@ -45,6 +45,15 @@ export const urlChangeFu = async (
             flag: true,
           },
         });
+      } else if (
+        type &&
+        name &&
+        [".doc", ".docx", ".ppt", ".pptx", ".xls", ".xlsx"].includes(type)
+      ) {
+        store.dispatch({
+          type: "layout/fileLookUrl",
+          payload: { url: srcRes, name: type },
+        });
       }
     }
   }
@@ -61,13 +70,18 @@ export const authFilesLookFu = (
 
   const nameRes = name ? name : "";
 
-  if (nameRes.toLowerCase().endsWith(".pdf")) {
-    if (url) {
-      noAuth ? window.open(baseURL + url) : urlChangeFu(url, false, "pdf");
+  // pdf和txt 直接新窗口打开
+  const arr0: (".pdf" | ".txt")[] = [".pdf", ".txt"];
+  arr0.forEach((v) => {
+    if (nameRes.toLowerCase().endsWith(v)) {
+      if (url) {
+        noAuth ? window.open(baseURL + url) : urlChangeFu(url, false, v);
+      }
+      flag = true;
     }
-    flag = true;
-  }
+  });
 
+  // 图片使用 antd的图片预览组件
   const arr1 = [".png", ".jpg", ".jpeg", ".gif"];
   arr1.forEach((v) => {
     if (nameRes.toLowerCase().endsWith(v)) {
@@ -87,10 +101,9 @@ export const authFilesLookFu = (
     }
   });
 
+  // 视频和音频 使用自己的封装的组件
   let type: "" | "video" | "audio" = "";
-
   const arr2 = [".mp3", ".wav"];
-
   arr2.forEach((v) => {
     if (nameRes.toLowerCase().endsWith(v)) {
       type = "audio";
@@ -115,5 +128,21 @@ export const authFilesLookFu = (
       : urlChangeFu(url, false, type);
   }
 
+  // ppt,doc,Excel使用插件
+  const arr3: (".docx" | ".xlsx")[] = [".docx", ".xlsx"];
+  arr3.forEach((v) => {
+    if (nameRes.toLowerCase().endsWith(v)) {
+      if (url) {
+        noAuth
+          ? store.dispatch({
+              type: "layout/fileLookUrl",
+              payload: { url: baseURL + url, name: v },
+            })
+          : urlChangeFu(url, false, v, nameRes);
+      }
+      flag = true;
+    }
+  });
+
   return flag;
 };