@flyfish-group/file-viewer-react 1.0.14 → 1.0.17

package/README.md

@@ -3,7 +3,7 @@
 React 文件预览组件。只提供私有化部署路线: 依赖的 `@flyfish-group/file-viewer-web` 会随包携带 Vue 基线 viewer 产物；使用 `npm install` 或已允许 pnpm 安装脚本后，会复制到宿主项目 `public/file-viewer`。React 组件默认加载 `/file-viewer/index.html`，不依赖任何外部服务。
 
 ```bash
-npm install @flyfish-group/file-viewer-react@1.0.14
+npm install @flyfish-group/file-viewer-react@1.0.17
 ```
 
 pnpm 10 默认会拦截依赖包的 `postinstall`。如果安装后提示 `Ignored build scripts: @flyfish-group/file-viewer-web`，请执行 `pnpm approve-builds` 允许该包，或运行 `pnpm exec file-viewer-copy-assets ./public/file-viewer`。
@@ -16,6 +16,9 @@ export function Preview() {
     <div style={{ height: '100vh' }}>
       <FileViewer
         url="https://example.com/demo.docx"
+        onViewerEvent={(event) => {
+          console.log(event.type, event.event, event.payload)
+        }}
         options={{
           toolbar: true,
           watermark: { text: '内部预览', opacity: 0.14 },
@@ -42,4 +45,4 @@ export function Preview() {
 <FileViewer viewerUrl="/vendor/file-viewer/index.html" url={url} />
 ```
 
-`options` 会透传给 Vue 基线预览器，可配置下载/打印/导出 HTML 操作栏、文字或图片水印，以及压缩包预览的 `libarchive.js` Worker、IndexedDB 缓存和体积上限。PDF 打印和导出会逐页生成完整页面，不依赖当前 iframe 视口或已渲染 canvas。
+`options` 会透传给 Vue 基线预览器，可配置下载/打印/导出 HTML 操作栏、文字或图片水印，以及压缩包预览的 `libarchive.js` Worker、IndexedDB 缓存和体积上限。打印按钮会按当前格式和渲染链路动态显隐；Word / PDF 打印和导出会生成完整页面，不依赖当前 iframe 视口或已渲染 canvas。生命周期、操作能力变化和内置操作事件会通过 `onViewerEvent` 回传给宿主，适合记录加载耗时、审计下载/打印尝试和同步外部状态。

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import { type IframeHTMLAttributes } from 'react';
-import { type FileRef, type ViewerFrameOptions } from '@flyfish-group/file-viewer-web';
-export type { FileRef, ViewerFrameOptions } from '@flyfish-group/file-viewer-web';
+import { type FileRef, type ViewerFrameEventHandler, type ViewerFrameOptions } from '@flyfish-group/file-viewer-web';
+export type { FileRef, ViewerFrameEventHandler, ViewerFrameOptions } from '@flyfish-group/file-viewer-web';
 export interface FileViewerHandle {
     iframe: HTMLIFrameElement | null;
     postFile(): boolean;
@@ -41,6 +41,10 @@ export interface FileViewerProps extends Omit<IframeHTMLAttributes<HTMLIFrameEle
      * 透传给 Vue 基线预览器的运行时选项，例如水印、工具栏和压缩包缓存限制。
      */
     options?: ViewerFrameOptions['options'];
+    /**
+     * iframe 模式下接收基线预览器抛出的生命周期和操作事件。
+     */
+    onViewerEvent?: ViewerFrameEventHandler;
 }
 export declare const FileViewer: import("react").ForwardRefExoticComponent<FileViewerProps & import("react").RefAttributes<FileViewerHandle>>;
 export default FileViewer;

package/dist/index.js

@@ -8,7 +8,7 @@ const defaultStyle = {
     display: 'block'
 };
 export const FileViewer = forwardRef((props, forwardedRef) => {
-    const { viewerUrl, url, file, name, from, targetOrigin, params, options, onLoad, style, title = 'Flyfish Viewer 文件预览', ...iframeProps } = props;
+    const { viewerUrl, url, file, name, from, targetOrigin, params, options, onViewerEvent, onLoad, style, title = 'Flyfish Viewer 文件预览', ...iframeProps } = props;
     const iframeRef = useRef(null);
     const [frameReady, setFrameReady] = useState(false);
     const frameOptions = useMemo(() => ({
@@ -45,6 +45,21 @@ export const FileViewer = forwardRef((props, forwardedRef) => {
             postFile();
         }
     }, [frameReady, postFile]);
+    useEffect(() => {
+        const handleMessage = (event) => {
+            var _a, _b, _c;
+            if (event.source !== ((_a = iframeRef.current) === null || _a === void 0 ? void 0 : _a.contentWindow)) {
+                return;
+            }
+            if (((_b = event.data) === null || _b === void 0 ? void 0 : _b.type) !== 'flyfish-viewer:lifecycle' &&
+                ((_c = event.data) === null || _c === void 0 ? void 0 : _c.type) !== 'flyfish-viewer:operation') {
+                return;
+            }
+            onViewerEvent === null || onViewerEvent === void 0 ? void 0 : onViewerEvent(event.data, event);
+        };
+        window.addEventListener('message', handleMessage);
+        return () => window.removeEventListener('message', handleMessage);
+    }, [onViewerEvent]);
     const handleLoad = useCallback((event) => {
         setFrameReady(true);
         onLoad === null || onLoad === void 0 ? void 0 : onLoad(event);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flyfish-group/file-viewer-react",
-  "version": "1.0.14",
+  "version": "1.0.17",
   "private": false,
   "type": "module",
   "description": "Private-deploy React component for Flyfish Viewer",
@@ -47,7 +47,7 @@
     "react": ">=17 <20"
   },
   "dependencies": {
-    "@flyfish-group/file-viewer-web": "^1.0.14"
+    "@flyfish-group/file-viewer-web": "^1.0.17"
   },
   "devDependencies": {
     "@types/react": "^19.2.14",