@koi-br/ocr-web-sdk 1.0.0

package/preview/tifPreview.vue

@@ -0,0 +1,362 @@
+<template>
+  <div class="preview-container" @wheel.prevent="handleWheel">
+    <div v-if="isLoading" class="loading-container">
+      <div>正在加载TIFF文件...</div>
+    </div>
+    <div v-else-if="error" class="preview-error-container">
+      <div>{{ error }}</div>
+    </div>
+    <div v-else class="img-container">
+      <!-- 工具栏 -->
+      <div class="preview-toolbar preview-toolbar-right">
+        <div class="toolbar-group">
+          <span class="scale-text">
+            {{ Math.round(scale * 100) }}%
+          </span>
+          <div class="toolbar-divider"></div>
+          <a-tooltip mini position="bottom" content="重置">
+            <a-button
+              size="small"
+              type="outline"
+              @click="reset"
+            >
+              <RefreshCcw :size="16" />
+            </a-button>
+          </a-tooltip>
+          <a-tooltip
+            v-if="originalId"
+            mini
+            position="bottom"
+            content="查看原图"
+          >
+            <a-button
+              size="small"
+              type="outline"
+              @click="original"
+            >
+              <Maximize2 :size="16" />
+            </a-button>
+          </a-tooltip>
+          <a-tooltip mini position="bottom" content="缩小">
+            <a-button
+              size="small"
+              type="outline"
+              :disabled="scale <= minScale"
+              @click="zoom(-0.1)"
+            >
+              <ZoomOut :size="16" />
+            </a-button>
+          </a-tooltip>
+          <a-tooltip mini position="bottom" content="放大">
+            <a-button
+              size="small"
+              type="outline"
+              :disabled="scale >= maxScale"
+              @click="zoom(0.1)"
+            >
+              <ZoomIn :size="16" />
+            </a-button>
+          </a-tooltip>
+          <a-tooltip
+            v-if="isDownload"
+            mini
+            position="bottom"
+            content="下载"
+          >
+            <a-button
+              size="small"
+              type="outline"
+              @click="emit('download')"
+            >
+              <Download :size="16" />
+            </a-button>
+          </a-tooltip>
+          <div class="toolbar-divider"></div>
+          <a-tooltip mini position="bottom" content="向左旋转">
+            <a-button
+              size="small"
+              type="outline"
+              @click="rotateImage('left')"
+            >
+              <RotateCw :size="16" />
+            </a-button>
+          </a-tooltip>
+          <a-tooltip mini position="bottom" content="向右旋转">
+            <a-button
+              size="small"
+              type="outline"
+              @click="rotateImage('right')"
+            >
+              <RotateCcw :size="16" />
+            </a-button>
+          </a-tooltip>
+        </div>
+      </div>
+
+      <!-- 图片容器 -->
+      <div
+        class="relative w-full h-full flex items-center justify-center overflow-hidden"
+        @mousedown="startPan"
+        @mousemove="pan"
+        @mouseup="stopPan"
+        @mouseleave="stopPan"
+      >
+        <img
+          ref="imgRef"
+          :src="imgDataUrl"
+          alt="TIFF Preview"
+          class="w-full"
+          :style="{
+            transform: `translate(${position.x}px, ${position.y}px) rotate(${rotation}deg) scale(${scale})`,
+            cursor: isPanning ? 'grabbing' : 'grab'
+          }"
+          @load="onImageLoad"
+          @error="onImageError"
+          @contextmenu.prevent
+          @mousedown.prevent
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, watch, onBeforeUnmount } from 'vue';
+import { ZoomIn, ZoomOut, RefreshCcw, RotateCw, Download, Maximize2 } from 'lucide-vue-next';
+
+const props = defineProps({
+  url: {
+    type: String,
+    required: true
+  },
+  minScale: {
+    type: Number,
+    default: 0.1
+  },
+  maxScale: {
+    type: Number,
+    default: 5
+  },
+  clickStep: {
+    type: Number,
+    default: 0.25
+  },
+  wheelStep: {
+    type: Number,
+    default: 0.1
+  },
+  originalId: {
+    type: String,
+    default: ''
+  },
+  isDownload: {
+    type: Boolean,
+    default: false
+  }
+});
+const emit = defineEmits(['load', 'error', 'original', 'download']);
+
+const isLoading = ref(false);
+const error = ref('');
+const imgDataUrl = ref('');
+const imgRef = ref(null);
+
+// 缩放、旋转和拖拽相关状态
+const rotation = ref(0);
+const scale = ref(1);
+const position = ref({ x: 0, y: 0 });
+const isPanning = ref(false);
+const lastPosition = ref({ x: 0, y: 0 });
+
+// 旋转功能
+const rotateImage = direction => {
+  if (direction === 'left') {
+    rotation.value = (rotation.value - 90) % 360;
+  } else {
+    rotation.value = (rotation.value + 90) % 360;
+  }
+};
+
+// 缩放功能
+const zoom = (delta, isWheel = false) => {
+  const step = isWheel ? props.wheelStep : props.clickStep;
+  const newScale = scale.value + delta * step;
+  if (newScale <= props.minScale) {
+    scale.value = props.minScale;
+  } else if (newScale >= props.maxScale) {
+    scale.value = props.maxScale;
+  } else {
+    scale.value = newScale;
+  }
+};
+
+// 鼠标滚轮缩放
+const handleWheel = e => {
+  e.preventDefault();
+  const delta = e.deltaY > 0 ? -1 : 1;
+  zoom(delta, true);
+};
+
+// 拖拽功能
+const startPan = e => {
+  if (e.button !== 0) return;
+  isPanning.value = true;
+  lastPosition.value = { x: e.clientX, y: e.clientY };
+};
+
+const pan = e => {
+  if (!isPanning.value) return;
+
+  const deltaX = e.clientX - lastPosition.value.x;
+  const deltaY = e.clientY - lastPosition.value.y;
+
+  position.value = {
+    x: position.value.x + deltaX,
+    y: position.value.y + deltaY
+  };
+
+  lastPosition.value = { x: e.clientX, y: e.clientY };
+};
+
+const stopPan = () => {
+  isPanning.value = false;
+};
+
+// 重置功能
+const reset = () => {
+  rotation.value = 0;
+  scale.value = 1;
+  position.value = { x: 0, y: 0 };
+};
+
+// 查看原图功能
+const original = () => {
+  emit('original');
+};
+
+// 清理资源
+const cleanup = () => {
+  if (imgDataUrl.value) {
+    // 释放blob URL
+    if (imgDataUrl.value.startsWith('blob:')) {
+      URL.revokeObjectURL(imgDataUrl.value);
+    }
+    imgDataUrl.value = '';
+  }
+  error.value = '';
+  // 重置缩放和位置
+  reset();
+};
+
+// 加载TIFF文件
+const loadTiff = async () => {
+  if (!props.url) return;
+  cleanup();
+  isLoading.value = true;
+  error.value = '';
+  try {
+    // 检查 TIFF 库是否已加载
+    if (typeof window.Tiff === 'undefined') {
+      throw new Error('TIFF 库未加载。请确保 tiff.min.js 已正确引入。');
+    }
+
+    const response = await fetch(props.url);
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+    const arrayBuffer = await response.arrayBuffer();
+
+    // 创建TIFF实例
+    const tiff = new window.Tiff({ buffer: arrayBuffer });
+    // 获取图像数据
+    const canvas = tiff.toCanvas();
+    // 转换为DataURL
+    imgDataUrl.value = canvas.toDataURL('image/png');
+    error.value = '';
+
+    // 清理 TIFF 实例
+    tiff.close();
+
+    emit('load', {
+      width: canvas.width,
+      height: canvas.height
+    });
+  } catch (err) {
+    console.error('加载TIFF文件失败:', err);
+    error.value = `加载TIFF文件失败: ${err.message}`;
+    emit('error', err);
+  } finally {
+    isLoading.value = false;
+  }
+};
+
+// 图片加载成功回调
+const onImageLoad = () => {
+  console.log('TIFF图片渲染成功');
+};
+
+// 图片加载失败回调
+const onImageError = () => {
+  error.value = '图片渲染失败';
+};
+
+// 监听URL变化
+watch(
+  () => props.url,
+  (newUrl, oldUrl) => {
+    if (newUrl !== oldUrl) {
+      loadTiff();
+    }
+  }
+);
+
+// 挂载时加载
+onMounted(() => {
+  if (props.url) {
+    loadTiff();
+  }
+});
+
+// 组件销毁时清理
+onBeforeUnmount(() => {
+  cleanup();
+});
+
+// 暴露方法给父组件
+defineExpose({
+  cleanup,
+  reload: loadTiff,
+  reset
+});
+</script>
+
+<style lang="less" scoped>
+// 样式已统一到公共样式文件，这里只保留组件特定样式
+.img-container {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  position: relative;
+}
+
+.img-container .relative {
+  flex: 1;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.img-container img {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  transition: transform 0.1s ease;
+}
+</style>

package/preview/xlsxPreview.vue

@@ -0,0 +1,168 @@
+<template>
+  <div class="preview-container">
+    <!-- 工具栏 -->
+    <div class="preview-toolbar preview-toolbar-right">
+      <div class="toolbar-group">
+        <span class="scale-text">
+          {{ Math.round(scale * 100) }}%
+        </span>
+        <div class="toolbar-divider"></div>
+        <a-tooltip mini position="bottom" content="重置">
+          <a-button
+            size="small"
+            type="outline"
+            @click="reset"
+          >
+            <RefreshCcw :size="16" />
+          </a-button>
+        </a-tooltip>
+        <a-tooltip mini position="bottom" content="缩小">
+          <a-button
+            size="small"
+            type="outline"
+            :disabled="scale <= 0.5"
+            @click="zoom(-0.1)"
+          >
+            <ZoomOut :size="16" />
+          </a-button>
+        </a-tooltip>
+        <a-tooltip mini position="bottom" content="放大">
+          <a-button
+            size="small"
+            type="outline"
+            :disabled="scale >= 2"
+            @click="zoom(0.1)"
+          >
+            <ZoomIn :size="16" />
+          </a-button>
+        </a-tooltip>
+        <a-tooltip
+          v-if="isDownload"
+          mini
+          position="bottom"
+          content="下载"
+        >
+          <a-button
+            size="small"
+            type="outline"
+            @click="emit('download')"
+          >
+            <Download :size="16" />
+          </a-button>
+        </a-tooltip>
+      </div>
+    </div>
+    <div
+      class="excel-wrapper"
+      :style="{ transform: `scale(${scale})`, transformOrigin: 'top left' }"
+    >
+      <VueOfficeExcel
+        v-if="excel"
+        :src="excel"
+        style="width: 100%; height: 75vh"
+        @rendered="onRendered"
+        @error="onError"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue';
+import { Message } from '@arco-design/web-vue';
+import { ZoomIn, ZoomOut, RefreshCcw, Download } from 'lucide-vue-next';
+import VueOfficeExcel from '@vue-office/excel/lib/v3/index';
+import '@vue-office/excel/lib/v3/index.css';
+
+const props = defineProps({
+  url: {
+    type: String,
+    required: true
+  },
+  isDownload: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const emit = defineEmits(['download']);
+
+const excel = ref('');
+const loading = ref(false);
+const scale = ref(1);
+
+// 缩放方法
+const zoom = delta => {
+  const newScale = scale.value + delta;
+  if (newScale >= 0.5 && newScale <= 2) {
+    scale.value = newScale;
+  }
+};
+
+// 重置方法
+const reset = () => {
+  scale.value = 1;
+};
+
+// 放大
+const zoomIn = () => {
+  zoom(0.1);
+};
+
+// 缩小
+const zoomOut = () => {
+  zoom(-0.1);
+};
+
+// 重置缩放
+const resetZoom = () => {
+  reset();
+};
+
+// 文件加载成功
+const onRendered = () => {
+  loading.value = false;
+};
+
+// 文件加载失败
+const onError = error => {
+  loading.value = false;
+  Message.error('Excel文件加载失败');
+  console.error('Excel文件加载失败:', error);
+};
+
+// 监听URL变化
+watch(
+  () => props.url,
+  newUrl => {
+    if (newUrl) {
+      loading.value = true;
+      excel.value = newUrl;
+    }
+  },
+  { immediate: true }
+);
+
+// 清理函数
+const cleanup = () => {
+  loading.value = false;
+  excel.value = '';
+  scale.value = 1;
+};
+
+// 暴露清理方法给父组件
+defineExpose({
+  cleanup
+});
+</script>
+
+<style lang="less" scoped>
+// 样式已统一到公共样式文件，这里只保留组件特定样式
+.excel-wrapper {
+  flex: 1;
+  display: inline-block;
+  min-width: 100%;
+  overflow: auto;
+  transition: transform 0.2s ease;
+}
+</style>