@flyfish-group/file-viewer-react 1.0.10 → 1.0.12

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.10
+npm install @flyfish-group/file-viewer-react@1.0.12
 ```
 
 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,14 @@ export function Preview() {
     <div style={{ height: '100vh' }}>
       <FileViewer
         url="https://example.com/demo.docx"
+        options={{
+          toolbar: true,
+          watermark: { text: '内部预览', opacity: 0.14 },
+          archive: {
+            workerUrl: '/file-viewer/vendor/libarchive/worker-bundle.js',
+            cache: true
+          }
+        }}
       />
     </div>
   )
@@ -33,3 +41,5 @@ export function Preview() {
 ```tsx
 <FileViewer viewerUrl="/vendor/file-viewer/index.html" url={url} />
 ```
+
+`options` 会透传给 Vue 基线预览器，可配置下载/打印/导出 HTML 操作栏、文字或图片水印，以及压缩包预览的 `libarchive.js` Worker、IndexedDB 缓存和体积上限。

package/dist/index.d.ts

@@ -37,6 +37,10 @@ export interface FileViewerProps extends Omit<IframeHTMLAttributes<HTMLIFrameEle
      * 预留给 Vue 基线页面的查询参数。
      */
     params?: ViewerFrameOptions['params'];
+    /**
+     * 透传给 Vue 基线预览器的运行时选项，例如水印、工具栏和压缩包缓存限制。
+     */
+    options?: ViewerFrameOptions['options'];
 }
 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, onLoad, style, title = 'Flyfish Viewer 文件预览', ...iframeProps } = props;
+    const { viewerUrl, url, file, name, from, targetOrigin, params, options, onLoad, style, title = 'Flyfish Viewer 文件预览', ...iframeProps } = props;
     const iframeRef = useRef(null);
     const [frameReady, setFrameReady] = useState(false);
     const frameOptions = useMemo(() => ({
@@ -18,8 +18,9 @@ export const FileViewer = forwardRef((props, forwardedRef) => {
         name,
         from,
         targetOrigin,
-        params
-    }), [viewerUrl, url, file, name, from, targetOrigin, params]);
+        params,
+        options
+    }), [viewerUrl, url, file, name, from, targetOrigin, params, options]);
     const src = useMemo(() => buildViewerSrc(frameOptions), [frameOptions]);
     const postFile = useCallback(() => {
         return postFileToViewer(iframeRef.current, frameOptions);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flyfish-group/file-viewer-react",
-  "version": "1.0.10",
+  "version": "1.0.12",
   "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.10"
+    "@flyfish-group/file-viewer-web": "^1.0.12"
   },
   "devDependencies": {
     "@types/react": "^19.2.14",