@koi-br/ocr-web-sdk 1.0.8 → 1.0.10

package/README.md

@@ -281,6 +281,106 @@ previewRef.value.preview(url, 'file.pdf', {
 previewRef.value.clearPreview();
 ```
 
+#### 访问子组件方法
+
+`FilePreview` 提供了多种方式访问子组件的方法：
+
+##### 方式一：使用代理方法（推荐）
+
+`FilePreview` 提供了常用方法的代理，可以直接调用：
+
+```javascript
+// PDF 预览相关方法
+previewRef.value.goToPage(5); // 跳转到第5页
+previewRef.value.jumpToPosition(1, [100, 100, 200, 200]); // 跳转到指定位置
+const currentPage = previewRef.value.getCurrentPage(); // 获取当前页码
+const totalPages = previewRef.value.getTotalPages(); // 获取总页数
+
+// 图片预览相关方法
+previewRef.value.resetImage(); // 重置图片预览
+previewRef.value.resetTif(); // 重置 TIF 预览
+```
+
+##### 方式二：获取子组件引用
+
+如果需要访问子组件的所有方法，可以获取子组件的引用：
+
+```javascript
+// 获取 PDF 预览组件引用
+const pdfPreview = previewRef.value.getPdfPreview();
+if (pdfPreview) {
+  pdfPreview.jumpToPosition(1, [100, 100, 200, 200]);
+  pdfPreview.goToPage(5);
+}
+
+// 获取图片预览组件引用
+const imagePreview = previewRef.value.getImagePreview();
+if (imagePreview) {
+  imagePreview.reset();
+}
+
+// 获取当前活动的预览组件（根据文件类型自动返回）
+const currentPreview = previewRef.value.getCurrentPreview();
+if (currentPreview) {
+  // 如果是 PDF 预览，可以调用 PDF 相关方法
+  if (currentPreview.jumpToPosition) {
+    currentPreview.jumpToPosition(1, [100, 100, 200, 200]);
+  }
+  // 如果是图片预览，可以调用图片相关方法
+  if (currentPreview.reset) {
+    currentPreview.reset();
+  }
+}
+```
+
+**完整使用示例：**
+```vue
+<template>
+  <div>
+    <FilePreview ref="previewRef" :is-download="true" />
+    <button @click="handlePreview">预览文件</button>
+    <button @click="handleJumpToPage">跳转到第5页</button>
+    <button @click="handleJumpToPosition">跳转到指定位置</button>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { FilePreview } from '@koi-br/ocr-web-sdk';
+
+const previewRef = ref(null);
+
+const handlePreview = () => {
+  previewRef.value.preview('https://example.com/file.pdf', 'file.pdf');
+};
+
+const handleJumpToPage = () => {
+  // 方式一：使用代理方法（推荐）
+  previewRef.value.goToPage(5);
+  
+  // 方式二：获取 PDF 预览组件引用
+  const pdfPreview = previewRef.value.getPdfPreview();
+  if (pdfPreview) {
+    pdfPreview.goToPage(5);
+  }
+};
+
+const handleJumpToPosition = () => {
+  // 跳转到第1页的指定位置 [x1, y1, x2, y2]
+  const bbox = [100, 100, 200, 200];
+  
+  // 方式一：使用代理方法（推荐）
+  previewRef.value.jumpToPosition(1, bbox);
+  
+  // 方式二：获取 PDF 预览组件引用
+  const pdfPreview = previewRef.value.getPdfPreview();
+  if (pdfPreview) {
+    pdfPreview.jumpToPosition(1, bbox);
+  }
+};
+</script>
+```
+
 ---
 
 ### PdfPreview 组件
@@ -321,8 +421,6 @@ interface BlockInfo {
 |--------|------|--------|------|
 | `goToPage` | `pageNum: number` | - | 跳转到指定页码（从1开始） |
 | `jumpToPosition` | `pageNum: number, bbox: [number, number, number, number], emitEvent?: boolean` | - | 跳转到指定位置并高亮（统一接口，**自动识别类型**，无需传入类型参数） |
-| `jumpToBlockPosition` | `pageNum: number, bbox: [number, number, number, number], emitEvent?: boolean` | - | 跳转到指定文本块位置并高亮（向后兼容的别名，内部调用统一接口） |
-| `jumpToSealPosition` | `pageNum: number, bbox: [number, number, number, number], emitEvent?: boolean` | - | 跳转到指定印章位置并高亮（向后兼容的别名，内部调用统一接口） |
 | `getCurrentPage` | - | `number` | 获取当前页码 |
 | `getTotalPages` | - | `number` | 获取总页数 |
 | `reset` | - | - | 重置预览状态 |
@@ -721,10 +819,6 @@ const handleFileChange = (event) => {
 ```javascript
 // 自动识别类型（推荐）
 pdfRef.value?.jumpToPosition(pageNum, bbox);
-
-// 向后兼容的别名方法
-pdfRef.value?.jumpToBlockPosition(pageNum, bbox);
-pdfRef.value?.jumpToSealPosition(pageNum, bbox);
 ```
 
 ### 6. 资源清理