@koi-br/ocr-web-sdk 1.0.17 → 1.0.19

package/dist/{tiff.min-Cj_Bc5eL.mjs → tiff.min-CgxI4GI6.mjs}

@@ -1,4 +1,4 @@
-import { g as getAugmentedNamespace, a as getDefaultExportFromCjs } from "./index-CTfcg7Et.mjs";
+import { g as getAugmentedNamespace, a as getDefaultExportFromCjs } from "./index-DYIW_Uab.mjs";
 function _mergeNamespaces(U, W) {
   for (var Z = 0; Z < W.length; Z++) {
     const s0 = W[Z];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koi-br/ocr-web-sdk",
-  "version": "1.0.17",
+  "version": "1.0.19",
   "description": "一个支持多种Office文件格式预览的Vue3组件SDK，包括PDF、Word、Excel、图片、OFD、TIF等格式",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
@@ -18,7 +18,8 @@
   "private": false,
   "author": "chunyu.ma",
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
   },
   "files": [
     "dist",
@@ -59,4 +60,4 @@
   "peerDependencies": {
     "vue": "^3.0.0"
   }
-}
+}

package/preview/ImagePreview.vue

@@ -151,7 +151,7 @@ const props = defineProps({
   }
 });
 
-const emit = defineEmits(['original', 'download']);
+const emit = defineEmits(['original', 'download', 'load']);
 
 const rotation = ref(0);
 const scale = ref(1);
@@ -219,6 +219,15 @@ const original = () => {
   emit('original');
 };
 
+// 图片加载完成处理
+const onImageLoad = (event) => {
+  const img = event.target;
+  emit('load', {
+    width: img.naturalWidth,
+    height: img.naturalHeight
+  });
+};
+
 defineExpose({
   reset
 });

package/preview/PdfPreview.vue

@@ -361,12 +361,14 @@ interface Props {
   blocksData?: BlockInfo[]; // PDF分块数据（从后端layout-parsing接口获取）
   showTocSidebar?: boolean; // 是否显示目录侧边栏（包括工具栏中的切换按钮），默认为 true
   isDownload?: boolean; // 是否显示下载按钮，默认为 false
+  enableMargin?: boolean; // 是否启用留白（自动缩放和适合页宽模式下），true=留白（左右各20px，共40px），false=不留白（只有左右5px padding），默认为 true
 }
 
 // 使用 withDefaults 显式设置默认值，确保未传递 prop 时使用默认值
 const props = withDefaults(defineProps<Props>(), {
   showTocSidebar: true, // 默认显示目录侧边栏
   isDownload: false, // 默认不显示下载按钮
+  enableMargin: true, // 默认启用留白
 });
 
 /**
@@ -1293,9 +1295,11 @@ const calculateScaleWithDimensions = (
   const canvasWidth = firstCanvas.width / pixelRatio;
   const canvasHeight = firstCanvas.height / pixelRatio;
 
-  // 预留较小的边距，让PDF占用更多宽度
+  // 根据配置决定是否留白
+  // enableMargin = true: 留白模式，左右总共预留 40px 边距（维持现状）
+  // enableMargin = false: 不留白模式，只有左右5px padding（.pdf-viewer 的 padding）
   // 注意：containerWidth 已经是 .pdf-viewer 的 clientWidth（已减去 padding）
-  const horizontalMargin = 40; // 左右总共预留 40px 边距
+  const horizontalMargin = props.enableMargin ? 40 : 10; // 留白模式：40px，不留白模式：10px
 
   // 计算可用宽度：直接使用容器宽度减去额外边距
   const availableWidth = containerWidth - horizontalMargin;

package/preview/docxPreview.vue

@@ -82,7 +82,7 @@ const props = defineProps({
   }
 });
 
-const emit = defineEmits(['download']);
+const emit = defineEmits(['download', 'load']);
 
 const containerRef = ref(null);
 const isLoading = ref(false);
@@ -180,6 +180,8 @@ const loadDocument = async () => {
     await nextTick();
     // 渲染文档
     await renderDocument(documentData);
+    // 文档加载完成，触发 load 事件
+    emit('load');
   } catch (err) {
     console.error('文档加载失败:', err);
     error.value = `加载文档失败: ${err.message}`;

package/preview/index.vue

@@ -30,6 +30,7 @@
       :is-download="props.isDownload"
       v-bind="props.pdfProps || {}"
       @download="handleDownload"
+      @pdf-loaded="handleFileLoaded"
     >
       <!-- 透传 left-top 插槽给 PdfPreview -->
       <template #left-top>
@@ -47,6 +48,7 @@
       v-bind="props.imageProps || {}"
       @original="handleOriginal"
       @download="handleDownload"
+      @load="handleFileLoaded"
     >
       <template #left-top>
         <slot name="left-top"></slot>
@@ -61,6 +63,7 @@
       :is-download="props.isDownload"
       v-bind="props.tifProps || {}"
       @download="handleDownload"
+      @load="handleFileLoaded"
     >
       <template #left-top>
         <slot name="left-top"></slot>
@@ -75,6 +78,7 @@
       :is-download="props.isDownload"
       v-bind="props.docxProps || {}"
       @download="handleDownload"
+      @load="handleFileLoaded"
     >
       <template #left-top>
         <slot name="left-top"></slot>
@@ -89,6 +93,7 @@
       :is-download="props.isDownload"
       v-bind="props.ofdProps || {}"
       @download="handleDownload"
+      @load="handleFileLoaded"
     >
     </OfdPreview>
 
@@ -100,6 +105,7 @@
       :is-download="props.isDownload"
       v-bind="props.xlsxProps || {}"
       @download="handleDownload"
+      @load="handleFileLoaded"
     >
       <template #left-top>
         <slot name="left-top"></slot>
@@ -130,6 +136,9 @@ import OfdPreview from './ofdPreview.vue';
 import DocxPreview from './docxPreview.vue';
 import XLSXPreview from './xlsxPreview.vue';
 
+// 定义 emits
+const emit = defineEmits(['load']);
+
 // 定义 props
 const props = defineProps({
   isDownload: {
@@ -187,11 +196,14 @@ const originalId = ref('');
 // 添加 AbortController 的引用
 const abortController = ref(null);
 
+// 文件加载完成的回调函数
+const onLoadCallback = ref(null);
+
 // 通过文件名判断类型
 const getFileType = (fileName = '') => {
   const ext = fileName.split('.').pop()?.toLowerCase();
   if (ext === 'pdf') return 'pdf';
-  if (['tif'].includes(ext)) return 'tif';
+  if (['tif', 'tiff'].includes(ext)) return 'tif';
   if (['ofd'].includes(ext)) return 'ofd';
   if (['docx'].includes(ext)) return 'docx';
   if (['xlsx'].includes(ext)) return 'xlsx';
@@ -217,7 +229,8 @@ const getMimeType = (fileName = '') => {
   const ext = fileName.split('.').pop()?.toLowerCase();
   const mimeTypes = {
     pdf: 'application/pdf',
-    tif: 'image/tif',
+    tif: 'image/tiff',
+    tiff: 'image/tiff',
     docx: 'application/docx',
     jpg: 'image/jpeg',
     jpeg: 'image/jpeg',
@@ -299,6 +312,7 @@ const handleDownload = () => {
  * @param {string} fileName - 文件名（可选，用于判断文件类型）
  * @param {object} options - 可选配置
  * @param {Function} options.onProgress - 下载进度回调函数 (progress) => void
+ * @param {Function} options.onLoad - 文件加载完成回调函数 (fileInfo) => void
  * @param {string} options.originalId - 原图ID（用于图片预览）
  */
 const preview = async (file, fileName, options = {}) => {
@@ -307,7 +321,10 @@ const preview = async (file, fileName, options = {}) => {
     return;
   }
 
-  const { onProgress, originalId: originalFileId } = options;
+  const { onProgress, onLoad, originalId: originalFileId } = options;
+  
+  // 保存加载完成回调函数
+  onLoadCallback.value = onLoad || null;
   
   // 清除旧的预览
   clearPreview();
@@ -359,6 +376,24 @@ const handleOriginal = () => {
   }
 };
 
+// 处理文件加载完成事件
+const handleFileLoaded = (data) => {
+  const fileInfo = {
+    fileType: fileType.value,
+    fileName: currentFileName.value,
+    fileUrl: fileUrl.value,
+    ...(data || {})
+  };
+  
+  // 调用用户提供的加载完成回调函数（通过 options.onLoad）
+  if (onLoadCallback.value && typeof onLoadCallback.value === 'function') {
+    onLoadCallback.value(fileInfo);
+  }
+  
+  // 向外 emit load 事件（供父组件通过 @load 监听）
+  emit('load', fileInfo);
+};
+
 // 获取当前活动的预览组件引用
 const getCurrentPreviewRef = () => {
   switch (fileType.value) {

package/preview/tifPreview.vue

@@ -327,6 +327,40 @@ const loadTiff = async () => {
       throw new Error(`HTTP error! status: ${response.status}`);
     }
     const arrayBuffer = await response.arrayBuffer();
+    // 验证文件大小
+    if (arrayBuffer.byteLength === 0) {
+      throw new Error('文件为空或无法读取');
+    }
+
+    // 验证文件实际格式
+    const uint8Array = new Uint8Array(arrayBuffer);
+    const isValidTiff =
+      (uint8Array[0] === 0x49 && uint8Array[1] === 0x49) || // Little-endian TIFF
+      (uint8Array[0] === 0x4d && uint8Array[1] === 0x4d); // Big-endian TIFF
+
+    // 检测是否为 JPEG 格式 (0xFF 0xD8)
+    const isJpeg = uint8Array[0] === 0xff && uint8Array[1] === 0xd8;
+    // 检测是否为 PNG 格式 (0x89 0x50 0x4E 0x47)
+    const isPng =
+      uint8Array[0] === 0x89 &&
+      uint8Array[1] === 0x50 &&
+      uint8Array[2] === 0x4e &&
+      uint8Array[3] === 0x47;
+
+    // 如果不是 TIFF 格式，但是常见的图片格式，直接使用图片预览
+    if (!isValidTiff && (isJpeg || isPng)) {
+      const blob = new Blob([arrayBuffer], {
+        type: isJpeg ? 'image/jpeg' : 'image/png'
+      });
+      imgDataUrl.value = URL.createObjectURL(blob);
+      error.value = '';
+      emit('load', {
+        width: 0,
+        height: 0
+      });
+      isLoading.value = false;
+      return;
+    }
 
     // 创建TIFF实例
     // tiff.js 的 Tiff 是一个构造函数，需要使用 new 关键字
@@ -382,7 +416,7 @@ const loadTiff = async () => {
 
 // 图片加载成功回调
 const onImageLoad = () => {
-  console.log('TIFF图片渲染成功');
+  // 图片加载成功
 };
 
 // 图片加载失败回调

package/preview/xlsxPreview.vue

@@ -88,7 +88,7 @@ const props = defineProps({
   }
 });
 
-const emit = defineEmits(['download']);
+const emit = defineEmits(['download', 'load']);
 
 const excel = ref('');
 const loading = ref(false);
@@ -125,6 +125,7 @@ const resetZoom = () => {
 // 文件加载成功
 const onRendered = () => {
   loading.value = false;
+  emit('load');
 };
 
 // 文件加载失败