zy-react-library 2.0.10 → 2.0.11

package/README.md

@@ -222,6 +222,10 @@ import { FORM_ITEM_RENDER_ENUM } from "zy-react-library/enum/formItemRender";
 | `PreviewImg` | `files=[]`、`fileUrlKey="filePath"`；图片固定 `width=100`、`height=100`，图片间距 `marginRight=10`、`marginBottom=10`。 |
 | `PreviewPdf` | `files=[]`、`nameKey=""`、`urlKey=""`、`name=""`、`url=""`。 |
 | `Pdf` | `visible=false`、`inline=false`、`title="PDF预览"`、`style={}`。 |
+| `PreviewExcel` | `files=[]`、`nameKey=""`、`urlKey=""`、`name=""`、`url=""`。 |
+| `Excel` | `visible=false`、`inline=false`、`title="Excel预览"`、`style={}`；弹窗宽度 `1000`，内容高度 `72vh`。 |
+| `PreviewWord` | `files=[]`、`nameKey=""`、`urlKey=""`、`name=""`、`url=""`。 |
+| `Word` | `visible=false`、`inline=false`、`title="Word预览"`、`style={}`；弹窗宽度 `900`，内容高度 `72vh`，默认背景 `#f5f5f5`、内边距 `24px`。 |
 | `Video` | `source=""`、`vid=""`、`playAuth=""`、`cover=""`、`autoplay=true`、`showProgress=true`、`playTime=0`、`inline=false`、`isLive=false`、`width="100%"`、`height="600px"`、`title="视频"`、`visible=false`、`aliPlayerProps={}`；弹窗宽度 `800`。 |
 | `AliPlayer` | `source=""`、`vid=""`、`playAuth=""`、`cover=""`、`width="100%"`、`height="600px"`、`autoplay=true`、`showProgress=true`、`isLive=false`、`playTime=0`。 |
 | `Signature` | `width=752`、`height=300`、`url=""`；签名弹窗宽度 `800`，画笔颜色 `black`，画布背景 `rgb(255,255,255)`。 |
@@ -477,9 +481,9 @@ PDF 预览入口组件。
 | `name` | `string` | 否 | `""` | 单文件文件名。 |
 | `url` | `string` | 否 | `""` | 单文件地址。 |
 
-### Pdf
-
-引入：
+### Pdf
+
+引入：
 
 ```tsx
 import Pdf from "zy-react-library/components/Pdf";
@@ -496,10 +500,86 @@ PDF 展示组件。
 | `onCancel` | `() => void` | 否 | - | 关闭弹窗回调。 |
 | `inline` | `boolean` | 否 | `false` | 是否内联展示。 |
 | `style` | `CSSProperties` | 否 | `{}` | 外层样式。 |
-
-### Video
-
-引入：
+
+### PreviewExcel
+
+引入：
+
+```tsx
+import PreviewExcel from "zy-react-library/components/PreviewExcel";
+```
+
+Excel 预览入口组件，使用方式和 `PreviewPdf` 一致，负责展示文件名和预览按钮。
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| `files` | `{ filePath?: string; fileName?: string; name?: string; url?: string; [key: string]: string }[]` | 否 | `[]` | Excel 文件对象数组；和 `name`、`url` 单文件模式互斥。 |
+| `nameKey` | `string` | 否 | `""` | 文件名字段名；不传时优先取 `name`、`fileName`。 |
+| `urlKey` | `string` | 否 | `""` | 文件地址字段名；不传时优先取 `filePath`、`url`。 |
+| `name` | `string` | 否 | `""` | 单文件文件名；和 `files` 互斥。 |
+| `url` | `string` | 否 | `""` | 单文件地址；和 `files` 互斥。 |
+
+### Excel
+
+引入：
+
+```tsx
+import Excel from "zy-react-library/components/Excel";
+```
+
+Excel 展示组件，使用 `exceljs` 解析 `xlsx`，再通过 `x-data-spreadsheet` 渲染表格预览。
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| `visible` | `boolean` | 否 | `false` | 是否以弹窗形式显示。 |
+| `onCancel` | `() => void` | 否 | - | 关闭弹窗回调。 |
+| `file` | `string` | 否 | - | `xlsx` 文件地址；非完整文件服务地址时会自动拼接 `getFileUrl()`。 |
+| `name` | `string` | 否 | - | 文件名，用于下载。 |
+| `inline` | `boolean` | 否 | `false` | 是否内联展示。 |
+| `title` | `string` | 否 | `"Excel预览"` | 弹窗标题。 |
+| `style` | `Record<string, any>` | 否 | `{}` | 内容区域样式，会合并到高度为 `72vh` 的外层容器。 |
+
+### PreviewWord
+
+引入：
+
+```tsx
+import PreviewWord from "zy-react-library/components/PreviewWord";
+```
+
+Word 预览入口组件，使用方式和 `PreviewPdf` 一致，负责展示文件名和预览按钮。
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| `files` | `{ filePath?: string; fileName?: string; name?: string; url?: string; [key: string]: string }[]` | 否 | `[]` | Word 文件对象数组；和 `name`、`url` 单文件模式互斥。 |
+| `nameKey` | `string` | 否 | `""` | 文件名字段名；不传时优先取 `name`、`fileName`。 |
+| `urlKey` | `string` | 否 | `""` | 文件地址字段名；不传时优先取 `filePath`、`url`。 |
+| `name` | `string` | 否 | `""` | 单文件文件名；和 `files` 互斥。 |
+| `url` | `string` | 否 | `""` | 单文件地址；和 `files` 互斥。 |
+
+### Word
+
+引入：
+
+```tsx
+import Word from "zy-react-library/components/Word";
+```
+
+Word 展示组件，使用 `docx-preview` 渲染 `docx` 文件。
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| `visible` | `boolean` | 否 | `false` | 是否以弹窗形式显示。 |
+| `onCancel` | `() => void` | 否 | - | 关闭弹窗回调。 |
+| `file` | `string` | 否 | - | `docx` 文件地址；非完整文件服务地址时会自动拼接 `getFileUrl()`。 |
+| `name` | `string` | 否 | - | 文件名，用于下载。 |
+| `inline` | `boolean` | 否 | `false` | 是否内联展示。 |
+| `title` | `string` | 否 | `"Word预览"` | 弹窗标题。 |
+| `style` | `Record<string, any>` | 否 | `{}` | 内容区域样式，会合并到默认高度 `72vh`、背景 `#f5f5f5`、内边距 `24px` 的外层容器。 |
+
+### Video
+
+引入：
 
 ```tsx
 import Video from "zy-react-library/components/Video";

package/components/Excel/index.d.ts

@@ -0,0 +1,22 @@
+import type { FC } from "react";
+
+export interface ExcelProps {
+  /** 是否显示弹窗 */
+  visible?: boolean;
+  /** 关闭回调 */
+  onCancel?: () => void;
+  /** xlsx 文件地址 */
+  file?: string;
+  /** xlsx 文件名 */
+  name?: string;
+  /** 是否内联展示 */
+  inline?: boolean;
+  /** 弹窗标题 */
+  title?: string;
+  /** 内容样式 */
+  style?: Record<string, any>;
+}
+
+declare const Excel: FC<ExcelProps>;
+
+export default Excel;

package/components/Excel/index.js

@@ -0,0 +1 @@
+import{Modal as e,Button as t,message as r,Spin as n}from"antd";import i from"exceljs";import{useRef as o,useState as l,useEffect as c}from"react";import a from"x-data-spreadsheet";import u from"../../hooks/useDownloadFile/index.js";import{getFileUrl as s}from"../../utils/index.js";import"x-data-spreadsheet/dist/xspreadsheet.css";import{jsx as d}from"react/jsx-runtime";function h(h){const{visible:x=!1,onCancel:w,file:p,name:v,inline:g=!1,title:y="Excel预览",style:C={}}=h,E=o(null),k=o(null),I=o(!1),T=s(),[b,j]=l(!1),{downloadFile:S}=u();c(()=>{if(!x&&!g||!p)return;I.current=!1;const e=setTimeout(()=>{(async()=>{j(!0),E.current.innerHTML="";try{const e=await fetch(p.includes(T)?p:T+p);if(!e.ok)throw new Error("加载 Excel 文件失败");const t=await e.arrayBuffer(),r=new i.Workbook;if(await r.xlsx.load(t),I.current)return;new a(E.current,{mode:"read",showToolbar:!1,showContextmenu:!1,view:{height:()=>E.current?.clientHeight||520,width:()=>E.current?.clientWidth||800}}).loadData(function(e){const t=[];return e.worksheets.forEach(e=>{t.push(function(e){const t={name:e.name,rows:{},cols:{len:e.columnCount||26},merges:e.model?.merges||[]};return e.columns.forEach((e,r)=>{e.width&&(t.cols[r]={width:Math.round(8*e.width)})}),e.eachRow({includeEmpty:!0},(e,r)=>{const n={cells:{}};e.height&&(n.height=Math.round(1.4*e.height)),e.eachCell({includeEmpty:!0},(e,t)=>{n.cells[t-1]={text:m(e)}}),t.rows[r-1]=n}),(t.merges||[]).forEach(e=>{const r=function(e){const[t,r=t]=e.split(":"),n=f(t),i=f(r);return{sri:n.rowIndex,sci:n.colIndex,eri:i.rowIndex,eci:i.colIndex}}(e),n=t.rows[r.sri]?.cells?.[r.sci];n&&(n.merge=[r.eri-r.sri,r.eci-r.sci])}),t}(e))}),t.length>0?t:[{name:"Sheet1",rows:{}}]}(r))}catch{r.error("加载 Excel 文件失败"),!g&&w&&w()}finally{I.current||j(!1)}})()},100);return()=>{I.current=!0,E.current&&(E.current.innerHTML=""),e&&clearTimeout(e)}},[x,g,p]);const D=()=>d(n,{spinning:b,children:d("div",{style:{height:"72vh",overflow:"hidden",...C},children:d("div",{ref:E,style:{width:"100%",height:"100%"}})})});return g?D():d("div",{ref:k,children:d(e,{style:{top:100,maxWidth:"calc(100vw - 32px)",paddingBottom:24},open:x,mask:{closable:!1},width:1e3,title:y,onCancel:()=>{w()},getContainer:!1,footer:[d(t,{onClick:()=>{w()},children:"关闭"},"cancel"),d(t,{type:"primary",onClick:()=>{S({url:p,name:v})},children:"下载"},"download")],children:D()})})}function m(e){if(null===e.value||void 0===e.value)return"";if(e.formula)return null===e.result||void 0===e.result?`=${e.formula}`:String(e.result);if(e.text)return e.text;if(e.value instanceof Date)return e.value.toLocaleDateString();if("object"==typeof e.value){if(e.value.text)return e.value.text;if(e.value.richText)return e.value.richText.map(e=>e.text).join("");if(void 0!==e.value.result)return String(e.value.result)}return String(e.value)}function f(e){const t=/^([A-Z]+)(\d+)$/i.exec(e);return t?{rowIndex:Number(t[2])-1,colIndex:(r=t[1],r.toUpperCase().split("").reduce((e,t)=>26*e+t.charCodeAt(0)-64,0)-1)}:{rowIndex:0,colIndex:0};var r}h.displayName="Excel";export{h as default};

package/components/PreviewExcel/index.d.ts

@@ -0,0 +1,18 @@
+import type { FC } from "react";
+
+export interface PreviewExcelProps {
+  /** 文件列表，和 name、url 冲突 */
+  files?: { filePath?: string; fileName?: string; name?: string; url?: string; [key: string]: string }[];
+  /** 文件名字段名，传入 files 时会优先查找是否存在 name、fileName */
+  nameKey?: string;
+  /** 文件路径字段名，传入 files 时会优先查找是否存在 filePath、url */
+  urlKey?: string;
+  /** 单个文件名，和 files 冲突 */
+  name?: string;
+  /** 单个文件路径，和 files 冲突 */
+  url?: string;
+}
+
+declare const PreviewExcel: FC<PreviewExcelProps>;
+
+export default PreviewExcel;

package/components/PreviewExcel/index.js

@@ -0,0 +1 @@
+import{Space as e,Button as l}from"antd";import{useState as i}from"react";import{getFileName as r}from"../../utils/index.js";import n from"../Excel/index.js";import{jsxs as a,Fragment as m,jsx as t}from"react/jsx-runtime";const c=c=>{const{files:o=[],nameKey:s="",urlKey:d="",name:p="",url:h=""}=c,[f,u]=i(!1),[y,x]=i(""),[v,C]=i(""),g=(e,l)=>{u(!0),x(e),C(l)},j=()=>{u(!1),x(""),C("")},P=e=>e.name||e.fileName||e[s]||r(e.filePath||e.url||e[d]),b=e=>e.filePath||e.url||e[d];return 0===o.length&&p&&h?a(m,{children:[a(e,{children:[t("span",{children:p}),t(l,{type:"primary",size:"small",onClick:()=>g(h,p),children:"预览"})]}),t(n,{visible:f,file:y,name:v,onCancel:j})]}):o.length>0&&!p&&!h?a(m,{children:[o.map(i=>t("div",{style:{marginTop:5},children:a(e,{children:[t("span",{children:P(i)}),t(l,{type:"primary",size:"small",onClick:()=>g(b(i),P(i)),children:"预览"})]})},b(i))),t(n,{visible:f,file:y,name:v,onCancel:j})]}):null};c.displayName="PreviewExcel";export{c as default};

package/components/PreviewWord/index.d.ts

@@ -0,0 +1,18 @@
+import type { FC } from "react";
+
+export interface PreviewWordProps {
+  /** 文件列表，和 name、url 冲突 */
+  files?: { filePath?: string; fileName?: string; name?: string; url?: string; [key: string]: string }[];
+  /** 文件名字段名，传入 files 时会优先查找是否存在 name、fileName */
+  nameKey?: string;
+  /** 文件路径字段名，传入 files 时会优先查找是否存在 filePath、url */
+  urlKey?: string;
+  /** 单个文件名，和 files 冲突 */
+  name?: string;
+  /** 单个文件路径，和 files 冲突 */
+  url?: string;
+}
+
+declare const PreviewWord: FC<PreviewWordProps>;
+
+export default PreviewWord;

package/components/PreviewWord/index.js

@@ -0,0 +1 @@
+import{Space as e,Button as i}from"antd";import{useState as l}from"react";import{getFileName as r}from"../../utils/index.js";import n from"../Word/index.js";import{jsxs as a,Fragment as m,jsx as t}from"react/jsx-runtime";const o=o=>{const{files:s=[],nameKey:c="",urlKey:d="",name:p="",url:h=""}=o,[f,u]=l(!1),[y,v]=l(""),[x,C]=l(""),g=(e,i)=>{u(!0),v(e),C(i)},j=()=>{u(!1),v(""),C("")},P=e=>e.name||e.fileName||e[c]||r(e.filePath||e.url||e[d]),b=e=>e.filePath||e.url||e[d];return 0===s.length&&p&&h?a(m,{children:[a(e,{children:[t("span",{children:p}),t(i,{type:"primary",size:"small",onClick:()=>g(h,p),children:"预览"})]}),t(n,{visible:f,file:y,name:x,onCancel:j})]}):s.length>0&&!p&&!h?a(m,{children:[s.map(l=>t("div",{style:{marginTop:5},children:a(e,{children:[t("span",{children:P(l)}),t(i,{type:"primary",size:"small",onClick:()=>g(b(l),P(l)),children:"预览"})]})},b(l))),t(n,{visible:f,file:y,name:x,onCancel:j})]}):null};o.displayName="PreviewWord";export{o as default};

package/components/Word/index.d.ts

@@ -0,0 +1,22 @@
+import type { FC } from "react";
+
+export interface WordProps {
+  /** 是否显示弹窗 */
+  visible?: boolean;
+  /** 关闭回调 */
+  onCancel?: () => void;
+  /** docx 文件地址 */
+  file?: string;
+  /** docx 文件名 */
+  name?: string;
+  /** 是否内联展示 */
+  inline?: boolean;
+  /** 弹窗标题 */
+  title?: string;
+  /** 内容样式 */
+  style?: Record<string, any>;
+}
+
+declare const Word: FC<WordProps>;
+
+export default Word;

package/components/Word/index.js

@@ -0,0 +1 @@
+import{Modal as r,Button as e,message as n,Spin as t}from"antd";import{renderAsync as i}from"docx-preview";import{useRef as o,useState as l,useEffect as a}from"react";import c from"../../hooks/useDownloadFile/index.js";import{getFileUrl as d}from"../../utils/index.js";import{jsx as u}from"react/jsx-runtime";function s(s){const{visible:f=!1,onCancel:m,file:p,name:h,inline:w=!1,title:g="Word预览",style:y={}}=s,v=o(null),x=o(null),k=o(!1),W=d(),[C,b]=l(!1),{downloadFile:T}=c();a(()=>{if(!f&&!w||!p)return;k.current=!1;const r=setTimeout(()=>{(async()=>{b(!0),v.current.innerHTML="";try{const r=await fetch(p.includes(W)?p:W+p);if(!r.ok)throw new Error("加载 Word 文件失败");const e=await r.arrayBuffer();if(k.current)return;await i(e,v.current,null,{className:"docx-preview",inWrapper:!0,ignoreWidth:!1,ignoreHeight:!1,breakPages:!0})}catch{n.error("加载 Word 文件失败"),!w&&m&&m()}finally{k.current||b(!1)}})()},100);return()=>{k.current=!0,v.current&&(v.current.innerHTML=""),r&&clearTimeout(r)}},[f,w,p]);const j=()=>u(t,{spinning:C,children:u("div",{style:{height:"72vh",overflowY:"auto",padding:"24px",background:"#f5f5f5",...y},children:u("div",{ref:v})})});return w?j():u("div",{ref:x,children:u(r,{style:{top:100,maxWidth:"calc(100vw - 32px)",paddingBottom:24},open:f,mask:{closable:!1},width:900,title:g,onCancel:()=>{m()},getContainer:!1,footer:[u(e,{onClick:()=>{m()},children:"关闭"},"cancel"),u(e,{type:"primary",onClick:()=>{T({url:p,name:h})},children:"下载"},"download")],children:j()})})}s.displayName="Word";export{s as default};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "zy-react-library",
   "private": false,
-  "version": "2.0.10",
+  "version": "2.0.11",
   "type": "module",
   "description": "",
   "author": "LiuJiaNan",
@@ -38,12 +38,15 @@
     "ahooks": "^3.9.5",
     "antd": "^6.4.4",
     "dayjs": "^1.11.18",
+    "docx-preview": "^0.3.7",
+    "exceljs": "^4.4.0",
     "lodash-es": "^4.17.21",
     "react": "^18.3.1",
     "react-pdf": "^10.2.0",
     "react-signature-canvas": "^1.1.0-alpha.2",
     "throttle-debounce": "^5.0.2",
-    "use-antd-resizable-header": "^3.2.2"
+    "use-antd-resizable-header": "^3.2.2",
+    "x-data-spreadsheet": "^1.1.9"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^5.4.1",