@koi-br/ocr-web-sdk 1.0.0

package/preview/docxPreview.vue

@@ -0,0 +1,216 @@
+<template>
+  <div class="preview-container">
+    <div
+      v-if="isLoading"
+      class="preview-loading-overlay"
+    >
+      <a-spin size="large" />
+      <p class="preview-loading-title">正在加载文档...</p>
+    </div>
+    <!-- 工具栏 -->
+    <div class="preview-toolbar preview-toolbar-right">
+      <div class="toolbar-group">
+        <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 ref="bodyContainer" class="docx-body-container" />
+    <div ref="styleContainer" />
+  </div>
+</template>
+
+<script setup>
+import { renderAsync } from 'docx-preview';
+import { ref, watch, onMounted, onBeforeUnmount, nextTick } from 'vue';
+import { Download } from 'lucide-vue-next';
+
+// 定义 props
+const props = defineProps({
+  // 文档 URL 地址
+  url: {
+    type: String,
+    required: true
+  },
+  // 文档名称
+  docName: {
+    type: String,
+    default: '文档预览'
+  },
+  // 可选：直接传入文档数据（优先级高于 url）
+  docData: {
+    type: [Blob, ArrayBuffer],
+    default: null
+  },
+  // 缩放控制
+  minScale: {
+    type: Number,
+    default: 0.1
+  },
+  maxScale: {
+    type: Number,
+    default: 3
+  },
+  clickStep: {
+    type: Number,
+    default: 0.25
+  },
+  wheelStep: {
+    type: Number,
+    default: 0.1
+  },
+  isDownload: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const emit = defineEmits(['download']);
+
+const containerRef = ref(null);
+const isLoading = ref(false);
+const error = ref('');
+const bodyContainer = ref(null);
+const styleContainer = ref(null);
+
+// 新增状态管理
+const scale = ref(1);
+const rotation = ref(0);
+
+// 缩放相关逻辑
+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 rotate = delta => {
+  rotation.value = (rotation.value + delta + 360) % 360;
+};
+
+// 滚轮处理函数
+const handleWheel = e => {
+  if (e.ctrlKey || e.metaKey) {
+    e.preventDefault();
+    const delta = e.deltaY > 0 ? -1 : 1;
+    zoom(delta, true);
+  }
+};
+
+// 重置功能
+const reset = () => {
+  scale.value = 1;
+  rotation.value = 0;
+  if (containerRef.value) {
+    containerRef.value.scrollTop = 0;
+    containerRef.value.scrollLeft = 0;
+  }
+};
+
+// 渲染文档的方法
+const renderDocument = async data => {
+  try {
+    if (!bodyContainer.value) {
+      throw new Error('bodyContainer 元素未找到');
+    }
+    bodyContainer.value.innerHTML = '';
+    const result = await renderAsync(
+      data,
+      bodyContainer.value,
+      styleContainer.value,
+      {
+        inWrapper: true,
+        styleMap: null,
+        defaultStyleMap: true,
+        useBase64URL: true,
+        ignoreHeight: false,
+        ignoreWidth: false,
+        ignoreFonts: false,
+        breakPages: true
+      }
+    );
+  } catch (err) {
+    error.value = `文档渲染失败: ${err.message}`;
+    throw err;
+  }
+};
+
+// 加载文档数据
+const loadDocument = async () => {
+  try {
+    isLoading.value = true;
+    error.value = '';
+    let documentData = null;
+    if (props.url) {
+      // 通过 URL 请求获取文档数据
+      const response = await fetch(props.url);
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+      documentData = await response.arrayBuffer();
+    } else {
+      throw new Error('未提供文档 URL 或数据');
+    }
+    isLoading.value = false;
+    await nextTick();
+    // 渲染文档
+    await renderDocument(documentData);
+  } catch (err) {
+    console.error('文档加载失败:', err);
+    error.value = `加载文档失败: ${err.message}`;
+    isLoading.value = false;
+  }
+};
+
+watch(
+  [() => props.url, () => props.docData],
+  () => {
+    if (props.url || props.docData) {
+      reset();
+      loadDocument();
+    }
+  },
+  { immediate: true }
+);
+
+// 组件挂载后加载文档
+onMounted(() => {
+  if (props.url || props.docData) {
+    loadDocument();
+  }
+});
+
+// 暴露方法给父组件使用
+defineExpose({
+  reset,
+  zoom,
+  rotate
+});
+</script>
+
+<style lang="less" scoped>
+// 样式已统一到公共样式文件，这里只保留组件特定样式
+:deep(.docx-wrapper) {
+  background-color: #fff;
+}
+</style>

package/preview/index.vue

@@ -0,0 +1,317 @@
+<template>
+  <div class="file-preview-container">
+    <!-- 下载进度条 - 居中显示 -->
+    <div
+      v-if="downloading"
+      class="preview-loading-overlay"
+    >
+      <div class="preview-loading-content">
+        <div class="preview-loading-title">
+          正在加载文件
+          <div class="preview-loading-filename">{{ currentFileName }}</div>
+        </div>
+        <div class="preview-progress-bar">
+          <div
+            class="preview-progress-fill"
+            :style="{ width: `${progress}%` }"
+          />
+        </div>
+        <div class="preview-progress-text">
+          {{ progress }}%
+        </div>
+      </div>
+    </div>
+
+    <!-- PDF预览 -->
+    <PdfPreview
+      v-if="fileType === 'pdf'"
+      ref="pdfPreviewRef"
+      :pdf-url="fileUrl"
+      :is-download="props.isDownload"
+      @download="handleDownload"
+    />
+
+    <!-- 图片预览 -->
+    <ImagePreview
+      v-else-if="fileType === 'image'"
+      ref="imagePreviewRef"
+      :url="fileUrl"
+      :original-id="originalId"
+      :is-download="props.isDownload"
+      @original="handleOriginal"
+      @download="handleDownload"
+    />
+
+    <!-- ttf预览 -->
+    <TifPreview
+      v-else-if="fileType === 'tif'"
+      ref="tifPreviewRe"
+      :url="fileUrl"
+      :is-download="props.isDownload"
+      @download="handleDownload"
+    />
+
+    <!-- docx预览 -->
+    <DocxPreview
+      v-else-if="fileType === 'docx'"
+      ref="docxPreviewRef"
+      :url="fileUrl"
+      :is-download="props.isDownload"
+      @download="handleDownload"
+    />
+
+    <!-- OFD预览 -->
+    <OfdPreview
+      v-else-if="fileType === 'ofd'"
+      ref="ofdPreviewRef"
+      :url="fileUrl"
+      :is-download="props.isDownload"
+      @download="handleDownload"
+    />
+
+    <!-- xlsx预览 -->
+    <XLSXPreview
+      v-else-if="fileType === 'xlsx'"
+      ref="xlsxPreviewRef"
+      :url="fileUrl"
+      :is-download="props.isDownload"
+      @download="handleDownload"
+    />
+
+    <!-- 不支持的文件类型 -->
+    <div v-else class="preview-empty-container">
+      <div class="preview-empty-message">{{ unsupportedMessage }}</div>
+      <a-button
+        v-if="downloadUrl"
+        type="primary"
+        @click="handleDownload"
+      >
+        点击下载文件
+      </a-button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onBeforeUnmount } from 'vue';
+import { Message } from '@arco-design/web-vue';
+import ImagePreview from './ImagePreview.vue';
+import PdfPreview from './PdfPreview.vue';
+import TifPreview from './tifPreview.vue';
+import OfdPreview from './ofdPreview.vue';
+import DocxPreview from './docxPreview.vue';
+import XLSXPreview from './xlsxPreview.vue';
+
+// 定义 props
+const props = defineProps({
+  isDownload: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const fileType = ref('');
+const currentFileName = ref('');
+const fileUrl = ref('');
+const downloading = ref(false);
+const progress = ref(0);
+const unsupportedMessage = ref('暂无预览内容');
+const downloadUrl = ref('');
+const imagePreviewRef = ref(null);
+const pdfPreviewRef = ref(null);
+const tifPreviewRef = ref(null);
+const ofdPreviewRef = ref(null);
+const docxPreviewRef = ref(null);
+const xlsxPreviewRef = ref(null);
+
+const originalId = ref('');
+
+// 添加 AbortController 的引用
+const abortController = ref(null);
+
+// 通过文件名判断类型
+const getFileType = (fileName = '') => {
+  const ext = fileName.split('.').pop()?.toLowerCase();
+  if (ext === 'pdf') return 'pdf';
+  if (['tif'].includes(ext)) return 'tif';
+  if (['ofd'].includes(ext)) return 'ofd';
+  if (['docx'].includes(ext)) return 'docx';
+  if (['xlsx'].includes(ext)) return 'xlsx';
+  if (
+    [
+      'jpg',
+      'jpeg',
+      'png',
+      'bmp',
+      'gif',
+      'webp',
+      'svg',
+      'apng',
+      'avif'
+    ].includes(ext)
+  )
+    return 'image';
+  return 'unknown';
+};
+
+// 获取文件的MIME类型
+const getMimeType = (fileName = '') => {
+  const ext = fileName.split('.').pop()?.toLowerCase();
+  const mimeTypes = {
+    pdf: 'application/pdf',
+    tif: 'image/tif',
+    docx: 'application/docx',
+    jpg: 'image/jpeg',
+    jpeg: 'image/jpeg',
+    bmp: 'image/bmp',
+    apng: 'image/apng',
+    avif: 'image/avif',
+    png: 'image/png',
+    gif: 'image/gif',
+    webp: 'image/webp',
+    svg: 'image/svg+xml',
+    xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+    xls: 'application/vnd.ms-excel'
+  };
+  return mimeTypes[ext] || 'application/octet-stream';
+};
+
+// 清除预览
+const clearPreview = () => {
+  // 取消之前的请求
+  if (abortController.value) {
+    abortController.value.abort();
+    abortController.value = null;
+  }
+
+  if (fileUrl.value) {
+    URL.revokeObjectURL(fileUrl.value);
+    fileUrl.value = '';
+  }
+  fileType.value = '';
+  downloading.value = false;
+  progress.value = 0;
+  unsupportedMessage.value = '暂无预览内容';
+
+  // 重置图片预览组件
+  if (imagePreviewRef.value) {
+    imagePreviewRef.value.reset();
+  }
+
+  // 重置 PDF 预览组件
+  if (pdfPreviewRef.value) {
+    pdfPreviewRef.value.cleanup();
+  }
+
+  // 重置 TIFF 预览组件
+  if (tifPreviewRef.value) {
+    tifPreviewRef.value.cleanup();
+  }
+
+  // 重置 OFD 预览组件
+  if (ofdPreviewRef.value) {
+    ofdPreviewRef.value.cleanup();
+  }
+
+  // 重置 DOCX 预览组件
+  if (docxPreviewRef.value) {
+    docxPreviewRef.value.reset?.();
+  }
+
+  // 重置 XLSX 预览组件
+  if (xlsxPreviewRef.value) {
+    xlsxPreviewRef.value.cleanup?.();
+  }
+};
+
+// 添加下载处理函数
+const handleDownload = () => {
+  if (!downloadUrl.value) return;
+  const link = document.createElement('a');
+  link.href = downloadUrl.value;
+  link.download = currentFileName.value;
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+};
+
+/**
+ * 预览方法 - SDK模式
+ * @param {string|Blob|File} file - 文件URL、Blob对象或File对象
+ * @param {string} fileName - 文件名（可选，用于判断文件类型）
+ * @param {object} options - 可选配置
+ * @param {Function} options.onProgress - 下载进度回调函数 (progress) => void
+ * @param {string} options.originalId - 原图ID（用于图片预览）
+ */
+const preview = async (file, fileName, options = {}) => {
+  if (!file) {
+    Message.warning('请提供文件');
+    return;
+  }
+
+  const { onProgress, originalId: originalFileId } = options;
+  
+  // 清除旧的预览
+  clearPreview();
+
+  // 如果传入的是URL字符串
+  if (typeof file === 'string') {
+    fileUrl.value = file;
+    downloadUrl.value = file;
+    currentFileName.value = fileName || '文件预览';
+    originalId.value = originalFileId || '';
+
+    // 判断文件类型
+    const type = getFileType(fileName || file);
+    if (type === 'unknown') {
+      unsupportedMessage.value = `暂不支持 ${fileName || file} 文件预览`;
+      return;
+    }
+    fileType.value = type;
+    downloading.value = false;
+    return;
+  }
+
+  // 如果传入的是Blob或File对象
+  if (file instanceof Blob || file instanceof File) {
+    currentFileName.value = fileName || (file instanceof File ? file.name : '文件预览');
+    originalId.value = originalFileId || '';
+
+    // 判断文件类型
+    const type = getFileType(currentFileName.value);
+    if (type === 'unknown') {
+      unsupportedMessage.value = `暂不支持 ${currentFileName.value} 文件预览`;
+      return;
+    }
+
+    fileType.value = type;
+    fileUrl.value = URL.createObjectURL(file);
+    downloading.value = false;
+    progress.value = 100;
+    return;
+  }
+
+  Message.error('不支持的文件格式');
+};
+
+const handleOriginal = () => {
+  if (fileUrl.value) {
+    preview(fileUrl.value, currentFileName.value, { originalId: fileUrl.value });
+  }
+};
+
+// 暴露方法给父组件
+defineExpose({
+  preview,
+  clearPreview
+});
+
+// 组件销毁时清理资源
+onBeforeUnmount(() => {
+  clearPreview();
+});
+</script>
+
+<style lang="less" scoped>
+// 样式已统一到公共样式文件，无需额外样式
+</style>

package/preview/ofdPreview.vue

@@ -0,0 +1,107 @@
+<template>
+  <div class="preview-container">
+    <!-- 工具栏 -->
+    <div v-if="props.isDownload" class="preview-toolbar preview-toolbar-right">
+      <div class="toolbar-group">
+        <a-tooltip
+          mini
+          position="bottom"
+          content="下载"
+        >
+          <a-button
+            size="small"
+            type="outline"
+            @click="emit('download')"
+          >
+            <Download :size="16" />
+          </a-button>
+        </a-tooltip>
+      </div>
+    </div>
+    <OfdView
+      :show-open-file-button="false"
+      :ofd-link="props.url"
+      class="ofd-view"
+      @load="handleDocumentLoad"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, watch, onMounted } from 'vue';
+import { OfdView } from 'bestofdview';
+import 'bestofdview/dist/style.css';
+import { Message } from '@arco-design/web-vue';
+import { Download } from 'lucide-vue-next';
+
+const props = defineProps({
+  url: {
+    type: String,
+    required: true
+  },
+  isDownload: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const emit = defineEmits(['download']);
+
+const loading = ref(false);
+
+// 监听文档加载状态
+const handleDocumentLoad = () => {
+  loading.value = true;
+  // 使用 fetch 检查文件是否可访问
+  if (props.url) {
+    fetch(props.url)
+      .then(response => {
+        if (response.ok) {
+          // 文件可访问，等待 bestofdview 内部加载完成
+          setTimeout(() => {
+            loading.value = false;
+          }, 1000);
+        } else {
+          loading.value = false;
+          Message.error(`加载失败: ${response.status}`);
+        }
+      })
+      .catch(error => {
+        console.error('检查OFD文件失败:', error);
+        loading.value = false;
+      });
+  }
+};
+
+// 监听URL变化
+watch(
+  () => props.url,
+  newUrl => {
+    if (newUrl) {
+      handleDocumentLoad();
+    }
+  },
+  { immediate: true }
+);
+
+// 组件挂载时处理
+onMounted(() => {
+  if (props.url) {
+    handleDocumentLoad();
+  }
+});
+
+// 清理函数（保持接口兼容性）
+const cleanup = () => {
+  loading.value = false;
+};
+
+// 暴露清理方法给父组件
+defineExpose({
+  cleanup
+});
+</script>
+
+<style lang="less" scoped>
+// 样式已统一到公共样式文件，这里只保留组件特定样式
+</style>