adtec-core-package 3.1.5 → 3.1.7

package/src/components/upload/OfficePreview.vue

@@ -0,0 +1,479 @@
+<template>
+  <div class="office-preview-root" :class="{ 'is-rich-preview': isRichPreview }">
+    <template v-if="isRichPreview">
+      <office-preview-header-bar
+        v-if="showHeader"
+        :title="headerTitle"
+        :zoom="scale"
+        :current-page="previewCurrentPage"
+        :total-pages="previewTotalPages"
+        :search-query="searchQuery"
+        :search-index="searchMatchIndex"
+        :search-total="searchMatchTotal"
+        :show-search="showSearch"
+        :show-page-nav="showPageNav"
+        :show-zoom="showZoom"
+        :show-download="showDownload"
+        :show-refresh="showRefresh"
+        :show-fullscreen="showFullscreen"
+        :show-close="showClose"
+        :fullscreen="fullscreen"
+        :download-loading="downloadLoading"
+        :min-zoom="MIN_OFFICE_ZOOM"
+        :max-zoom="MAX_RICH_PREVIEW_ZOOM"
+        @zoom-in="zoomIn"
+        @zoom-out="zoomOut"
+        @zoom-reset="resetZoom"
+        @download="emit('download')"
+        @refresh="emit('refresh')"
+        @toggle-fullscreen="emit('toggle-fullscreen')"
+        @close="emit('close')"
+        @page-prev="goPrevPage"
+        @page-next="goNextPage"
+        @search="handleSearch"
+        @search-clear="handleSearchClear"
+        @search-prev="goPrevSearchMatch"
+        @search-next="goNextSearchMatch"
+      />
+      <div class="office-rich-wrap">
+        <pdf-js-viewer
+          v-if="officeType === 'pdf' || previewAsPdf"
+          ref="pdfViewerRef"
+          :src="fileSrc"
+          :scale="scale"
+          class="office-rich-viewer"
+          @loaded="handleRendered"
+          @error="handleError"
+          @page-change="previewCurrentPage = $event"
+        />
+        <excel-js-viewer
+          v-else-if="officeType === 'excel'"
+          ref="excelViewerRef"
+          :src="fileSrc"
+          :scale="scale"
+          class="office-rich-viewer"
+          @loaded="handleRendered"
+          @error="handleError"
+          @page-change="previewCurrentPage = $event"
+        />
+        <docx-js-viewer
+          v-else-if="officeType === 'docx' && !previewAsPdf"
+          ref="docxViewerRef"
+          :src="fileSrc"
+          :scale="scale"
+          :file-name="fileName"
+          :file-type="fileType"
+          :file-url="url"
+          class="office-rich-viewer"
+          @loaded="handleRendered"
+          @error="handleError"
+          @page-change="previewCurrentPage = $event"
+        />
+        <div v-if="isPreviewLoading" class="office-rich-loading">
+          <div class="loading-card">
+            <span class="loading-spinner" />
+            <p class="loading-title">{{ loadingMessage }}</p>
+            <p v-if="headerTitle" class="loading-sub">{{ headerTitle }}</p>
+          </div>
+        </div>
+      </div>
+    </template>
+    <div v-else-if="isUnsupportedType" class="unsupported-preview">
+      <el-empty :description="unsupportedMessage">
+        <el-button v-if="showDownload" type="primary" @click="emit('download')">
+          下载文件
+        </el-button>
+      </el-empty>
+    </div>
+    <pre v-else-if="officeType === 'txt'" class="txt-preview">{{ txtContent }}</pre>
+  </div>
+</template>
+<script setup lang="ts">
+import { computed, ref, watch, nextTick } from 'vue'
+import { ElMessage } from 'element-plus'
+import request from '../../utils/AxiosConfig'
+import documentApi from '../../api/DocumentApi'
+import frameworkUtils from '../../utils/FrameworkUtils'
+import { toSameOriginFileUrl } from '../../utils/toSameOriginFileUrl'
+import OfficePreviewHeaderBar from './OfficePreviewHeaderBar.vue'
+import PdfJsViewer from './PdfJsViewer.vue'
+import ExcelJsViewer from './ExcelJsViewer.vue'
+import DocxJsViewer from './DocxJsViewer.vue'
+import {
+  type OfficePreviewType,
+  clampRichPreviewZoom,
+  isSupportedPreviewType,
+  isLegacyDocFile,
+  MAX_RICH_PREVIEW_ZOOM,
+  MIN_OFFICE_ZOOM,
+  toOfficePreviewType,
+  OFFICE_ZOOM_STEP,
+} from '../../utils/officePreviewUtil.ts'
+
+const props = withDefaults(
+  defineProps<{
+    url: string
+    fileId?: string
+    fileName?: string
+    fileType?: string
+    showHeader?: boolean
+    showSearch?: boolean
+    showPageNav?: boolean
+    showZoom?: boolean
+    showDownload?: boolean
+    showRefresh?: boolean
+    showFullscreen?: boolean
+    showClose?: boolean
+    fullscreen?: boolean
+    downloadLoading?: boolean
+  }>(),
+  {
+    showHeader: true,
+    showSearch: true,
+    showPageNav: true,
+    showZoom: true,
+    showDownload: false,
+    showRefresh: false,
+    showFullscreen: false,
+    showClose: false,
+    fullscreen: false,
+    downloadLoading: false,
+  },
+)
+
+const scale = defineModel<number>('scale', { default: 1 })
+
+const emit = defineEmits<{
+  loaded: []
+  error: [err?: unknown]
+  download: []
+  refresh: []
+  'toggle-fullscreen': []
+  close: []
+}>()
+
+const fileSrc = ref<Blob | ArrayBuffer>()
+const txtContent = ref('')
+const previewAsPdf = ref(false)
+const pdfViewerRef = ref<InstanceType<typeof PdfJsViewer> | null>(null)
+const excelViewerRef = ref<InstanceType<typeof ExcelJsViewer> | null>(null)
+const docxViewerRef = ref<InstanceType<typeof DocxJsViewer> | null>(null)
+const previewCurrentPage = ref(1)
+const previewTotalPages = ref(0)
+const searchQuery = ref('')
+const searchMatchIndex = ref(-1)
+const searchMatchTotal = ref(0)
+const isPreviewLoading = ref(false)
+const loadingPhase = ref<'fetch' | 'open'>('fetch')
+
+type RichViewer = {
+  totalPages?: number
+  scrollToPage?: (page: number) => Promise<void>
+  runSearch?: (query: string) => Promise<{ total: number; index: number } | undefined>
+  clearSearch?: () => void
+  gotoSearchMatch?: (direction: 1 | -1) => Promise<{ total: number; index: number } | undefined>
+  refitLayout?: () => void
+}
+
+const loadingMessage = computed(() =>
+  loadingPhase.value === 'fetch' ? '正在获取文档，请稍候…' : '正在打开文档，请稍候…',
+)
+
+const officeType = computed<OfficePreviewType>(() =>
+  toOfficePreviewType(props.fileType, props.fileName, props.url),
+)
+
+const isLegacyDoc = computed(() =>
+  isLegacyDocFile(props.fileType, props.fileName, props.url),
+)
+
+const isRichPreview = computed(
+  () =>
+    officeType.value === 'pdf' ||
+    officeType.value === 'excel' ||
+    officeType.value === 'docx',
+)
+
+const isUnsupportedType = computed(
+  () => !!officeType.value && !isSupportedPreviewType(officeType.value),
+)
+
+const unsupportedMessage = computed(() => {
+  const ext = officeType.value || '未知'
+  return `暂不支持在线预览 ${ext} 格式，请下载后查看`
+})
+
+const headerTitle = computed(() => props.fileName || '')
+
+const activeViewer = computed<RichViewer | null>(() => {
+  if (officeType.value === 'pdf' || previewAsPdf.value) return pdfViewerRef.value
+  if (officeType.value === 'excel') return excelViewerRef.value
+  if (officeType.value === 'docx') return docxViewerRef.value
+  return null
+})
+
+const resetPreview = () => {
+  fileSrc.value = undefined
+  txtContent.value = ''
+  previewAsPdf.value = false
+  scale.value = 1
+  previewCurrentPage.value = 1
+  previewTotalPages.value = 0
+  searchQuery.value = ''
+  searchMatchIndex.value = -1
+  searchMatchTotal.value = 0
+  isPreviewLoading.value = false
+  loadingPhase.value = 'fetch'
+  pdfViewerRef.value?.clearSearch()
+  excelViewerRef.value?.clearSearch()
+  docxViewerRef.value?.clearSearch()
+}
+
+const loadPreview = async () => {
+  if (!props.url || !officeType.value) {
+    return
+  }
+  if (isUnsupportedType.value) {
+    isPreviewLoading.value = false
+    emit('loaded')
+    return
+  }
+  isPreviewLoading.value = true
+  loadingPhase.value = 'fetch'
+  try {
+    if (isLegacyDoc.value) {
+      if (!props.fileId) {
+        isPreviewLoading.value = false
+        ElMessage.warning('无法预览该 .doc 文件，请下载后查看')
+        emit('loaded')
+        return
+      }
+      loadingPhase.value = 'open'
+      const pdfBlob = await documentApi.previewWordAsPdf(props.fileId)
+      previewAsPdf.value = true
+      fileSrc.value = pdfBlob
+      return
+    }
+    const res = await request<Blob>({
+      url: toSameOriginFileUrl(props.url),
+      method: 'get',
+      responseType: 'blob',
+    })
+    if (officeType.value === 'txt') {
+      txtContent.value = await res.data.text()
+      isPreviewLoading.value = false
+      emit('loaded')
+    } else {
+      loadingPhase.value = 'open'
+      fileSrc.value = res.data
+    }
+  } catch (err) {
+    isPreviewLoading.value = false
+    frameworkUtils.messageError(err)
+    emit('error', err)
+  }
+}
+
+const handleRendered = async () => {
+  await nextTick()
+  previewTotalPages.value = Number(activeViewer.value?.totalPages ?? 0)
+  isPreviewLoading.value = false
+  emit('loaded')
+}
+
+const handleError = (err?: unknown) => {
+  isPreviewLoading.value = false
+  emit('error', err)
+}
+
+const zoomIn = () => {
+  scale.value = clampRichPreviewZoom(scale.value + OFFICE_ZOOM_STEP)
+}
+
+const zoomOut = () => {
+  scale.value = clampRichPreviewZoom(scale.value - OFFICE_ZOOM_STEP)
+}
+
+const resetZoom = () => {
+  scale.value = 1
+}
+
+const goPrevPage = () => {
+  void activeViewer.value?.scrollToPage?.(previewCurrentPage.value - 1)
+}
+
+const goNextPage = () => {
+  void activeViewer.value?.scrollToPage?.(previewCurrentPage.value + 1)
+}
+
+const handleSearch = async (query: string) => {
+  searchQuery.value = query
+  if (!query) {
+    handleSearchClear()
+    return
+  }
+  const result = await activeViewer.value?.runSearch?.(query)
+  if (!result || result.total === 0) {
+    searchMatchIndex.value = -1
+    searchMatchTotal.value = 0
+    ElMessage.warning('未找到匹配内容')
+    return
+  }
+  searchMatchIndex.value = result.index
+  searchMatchTotal.value = result.total
+}
+
+const handleSearchClear = () => {
+  searchQuery.value = ''
+  searchMatchIndex.value = -1
+  searchMatchTotal.value = 0
+  activeViewer.value?.clearSearch?.()
+}
+
+const goPrevSearchMatch = async () => {
+  const result = await activeViewer.value?.gotoSearchMatch?.(-1)
+  if (!result) return
+  searchMatchIndex.value = result.index
+  searchMatchTotal.value = result.total
+}
+
+const goNextSearchMatch = async () => {
+  const result = await activeViewer.value?.gotoSearchMatch?.(1)
+  if (!result) return
+  searchMatchIndex.value = result.index
+  searchMatchTotal.value = result.total
+}
+
+watch(
+  () => [props.url, props.fileName, props.fileType] as const,
+  ([fileUrl]) => {
+    resetPreview()
+    if (fileUrl) {
+      loadPreview()
+    }
+  },
+  { immediate: true },
+)
+
+watch(
+  () => props.fullscreen,
+  () => {
+    void nextTick(() => {
+      activeViewer.value?.refitLayout?.()
+    })
+  },
+)
+
+defineExpose({
+  zoomIn,
+  zoomOut,
+  resetZoom,
+  officeType,
+})
+</script>
+<style scoped lang="scss">
+.office-preview-root {
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  overflow: auto;
+  background: #f5f5f5;
+
+  &.is-rich-preview {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+}
+
+.office-rich-viewer {
+  flex: 1;
+  width: 100%;
+  min-height: 0;
+}
+
+.office-rich-wrap {
+  position: relative;
+  flex: 1;
+  width: 100%;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.office-rich-loading {
+  position: absolute;
+  inset: 0;
+  z-index: 3;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #f5f5f5;
+}
+
+.loading-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  padding: 28px 36px;
+  border-radius: 12px;
+  background: #fff;
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
+}
+
+.loading-spinner {
+  width: 36px;
+  height: 36px;
+  border: 3px solid #e5e7eb;
+  border-top-color: #409eff;
+  border-radius: 50%;
+  animation: office-preview-spin 0.9s linear infinite;
+}
+
+.loading-title {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+  color: #374151;
+}
+
+.loading-sub {
+  margin: 0;
+  max-width: 280px;
+  font-size: 12px;
+  color: #9ca3af;
+  text-align: center;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+@keyframes office-preview-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.txt-preview {
+  height: 100%;
+  margin: 0;
+  padding: 16px;
+  overflow: auto;
+  text-align: left;
+  white-space: pre-wrap;
+  word-break: break-word;
+  background: #fff;
+  font-size: 14px;
+  line-height: 1.6;
+}
+
+.unsupported-preview {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  min-height: 240px;
+  background: #fff;
+}
+</style>