refactor: 使用 vue-office 重构文件预览（移除KKFileView）

移除 KKFileView 使用 vue-office 重构文件预览移除依赖 editor,md-editor-v3,editor-for-vue
2025-09-09 18:59:26 +08:00 · 2024-10-14 06:51:52 +00:00
parent 2e15cf2d48
commit 51aceac988
13 changed files with 298 additions and 992 deletions
--- a/.env.development
+++ b/.env.development
@@ -13,9 +13,3 @@ VITE_BASE = '/'

 # 是否开启开发者工具
 VITE_OPEN_DEVTOOLS = false
-
-# 是否开启KKFileView
-FILE_OPEN_PREVIEW = true
-
-# KKFileView服务器地址
-FILE_VIEW_SERVER_URL = 'http://192.168.122.209:8012'
--- a/.env.production
+++ b/.env.production
@@ -9,9 +9,3 @@ VITE_API_WS_URL = 'wss://api.continew.top'

 # 地址前缀
 VITE_BASE = '/'
-
-# 是否开启KKFileView
-FILE_OPEN_PREVIEW = false
-
-# KKFileView服务器地址
-FILE_VIEW_SERVER_URL = 'http://localhost:8012'
--- a/.env.test
+++ b/.env.test
@@ -14,9 +14,3 @@ VITE_BASE = '/test'

 # 是否开启开发者工具
 VITE_OPEN_DEVTOOLS = true
-
-# 是否开启KKFileView
-FILE_OPEN_PREVIEW = false
-
-# KKFileView服务器地址
-FILE_VIEW_SERVER_URL = 'http://localhost:8012'
--- a/package.json
+++ b/package.json
@@ -22,8 +22,6 @@
    "@ddietr/codemirror-themes": "^1.4.2",
    "@vueuse/components": "^10.5.0",
    "@vueuse/core": "^10.5.0",
-    "@wangeditor/editor": "^5.1.1",
-    "@wangeditor/editor-for-vue": "^5.1.12",
    "aieditor": "^1.0.13",
    "animate.css": "^4.1.1",
    "axios": "^0.27.2",
@@ -34,7 +32,6 @@
    "echarts": "^5.4.2",
    "jsencrypt": "^3.3.2",
    "lodash-es": "^4.17.21",
-    "md-editor-v3": "^4.13.4",
    "mitt": "^3.0.0",
    "mockjs": "^1.1.0",
    "nprogress": "^0.2.0",
@@ -49,12 +46,16 @@
    "vue-codemirror6": "^1.1.27",
    "vue-color-kit": "^1.0.5",
    "vue-cropper": "^1.1.1",
+    "vue-demi": "^0.14.10",
    "vue-draggable-plus": "^0.3.5",
    "vue-echarts": "^6.5.5",
    "vue-json-pretty": "^2.4.0",
    "vue-router": "^4.3.3",
    "xe-utils": "^3.5.7",
-    "xgplayer": "^2.31.6"
+    "xgplayer": "^2.31.6",
+    "@vue-office/docx": "1.6.0",
+    "@vue-office/excel": "1.7.1",
+    "@vue-office/pdf": "1.6.4"
  },
  "devDependencies": {
    "@antfu/eslint-config": "^2.16.3",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/components/FilePreview/index.vue
+++ b/src/components/FilePreview/index.vue
@@ -0,0 +1,164 @@
+<template>
+  <a-modal
+      v-model:visible="visible"
+      :width="width >= 1350 ? 1350 : '100%'"
+      :on-before-close="onClose"
+      :footer="false"
+      esc-to-close="esc-to-close"
+      @close="onClose"
+  >
+    <template #title>
+      {{ modalTitle }}
+      <div class="toolbar">
+        <a-tooltip position="tl" content="在新标签页打开">
+          <icon-launch style="cursor: pointer" @click="onOpen" />
+        </a-tooltip>
+      </div>
+    </template>
+    <a-spin :loading="loading" class="w-full mt--10">
+      <a-card class="preview-content">
+        <VueOfficePdf
+            v-if="filePreview.fileInfo?.fileType === 'pdf'"
+            :src="filePreview.fileInfo?.data"
+            class="h-full"
+            @rendered="renderedHandler"
+            @error="errorHandler"
+        />
+        <VueOfficeDocx
+            v-else-if="WordTypes.includes(filePreview.fileInfo?.fileType || '')"
+            :src="filePreview.fileInfo?.data"
+            class="h-full"
+            @rendered="renderedHandler"
+            @error="errorHandler"
+        />
+        <VueOfficeExcel
+            v-else-if="ExcelTypes.includes(filePreview.fileInfo?.fileType || '')"
+            :src="filePreview.fileInfo?.data"
+            style="height: 80vh; width: 100%"
+            :options="filePreview.excelConfig"
+            @rendered="renderedHandler"
+            @error="errorHandler"
+        />
+      </a-card>
+    </a-spin>
+  </a-modal>
+</template>
+
+<script setup lang="ts">
+import VueOfficePdf from '@vue-office/pdf'
+import VueOfficeDocx from '@vue-office/docx'
+import '@vue-office/docx/lib/index.css'
+import VueOfficeExcel from '@vue-office/excel'
+import '@vue-office/excel/lib/index.css'
+import { Message } from '@arco-design/web-vue'
+import { useWindowSize } from '@vueuse/core'
+import type { FilePreview } from '@/components/FilePreview/type'
+import { ExcelTypes, WordTypes } from '@/constant/file'
+
+const visible = ref<boolean>(false)
+const loading = ref<boolean>(false)
+const { width } = useWindowSize()
+
+// 用于关闭弹框时销毁,释放内存
+const blobUrl = ref<string>('')
+
+// 文件预览对象
+const filePreview = reactive<FilePreview>({
+  fileInfo: {},
+  excelConfig: {}
+})
+// 弹框标题
+const modalTitle = computed(() => {
+  const { fileName, fileType } = filePreview.fileInfo || {}
+  return fileName && fileType ? `${fileName}.${fileType}` : '文件预览'
+})
+
+// 预览
+const onPreview = (previewInfo: FilePreview) => {
+  filePreview.fileInfo = previewInfo.fileInfo
+  visible.value = true
+  loading.value = true
+}
+
+const renderedHandler = () => {
+  loading.value = false
+}
+const errorHandler = () => {
+  loading.value = false
+  Message.error('文件加载失败')
+}
+
+// 新标签页打开
+const onOpen = () => {
+  const data = filePreview.fileInfo?.data
+
+  if (!data) {
+    console.error('没有数据提供')
+    return
+  }
+
+  let url: string | null = null
+
+  if (typeof data === 'string') {
+    // 如果是字符串，假设它是一个 URL，直接使用
+    url = data
+  } else if (data instanceof Blob || data instanceof ArrayBuffer) {
+    // 如果之前创建了 Blob URL，先释放
+    if (blobUrl.value) {
+      URL.revokeObjectURL(blobUrl.value)
+    }
+
+    // 如果是 Blob 或 ArrayBuffer，则将其转换为 Blob
+    const blob = data instanceof Blob ? data : new Blob([data])
+    url = URL.createObjectURL(blob)
+    blobUrl.value = url
+  } else {
+    console.error('不支持的类型')
+    return
+  }
+
+  // 打开生成的 URL
+  window.open(url)
+}
+// 关闭弹框
+const onClose = () => {
+  Object.assign(filePreview, {
+    fileInfo: {},
+    excelConfig: {}
+  })
+  loading.value = false
+  visible.value = false
+
+  // 关闭时释放 Blob URL
+  if (blobUrl.value) {
+    URL.revokeObjectURL(blobUrl.value)
+    blobUrl.value = ''
+  }
+}
+
+onUnmounted(() => {
+  if (blobUrl.value) {
+    URL.revokeObjectURL(blobUrl.value)
+  }
+})
+
+defineExpose({ onPreview })
+</script>
+
+<style scoped lang="scss">
+.h-full {
+  height: 100vh;
+}
+
+.card {
+  background: white !important;
+  padding-bottom: 5px;
+}
+
+.toolbar {
+  position: absolute;
+  float: right;
+  right: 50px;
+  top: 10px;
+}
+</style>
--- a/src/components/FilePreview/type.ts
+++ b/src/components/FilePreview/type.ts
@@ -0,0 +1,20 @@
+export interface FilePreview {
+  fileInfo?: FileInfo
+  excelConfig?: Partial<ExcelConfig>
+
+}
+
+export interface ExcelConfig {
+  xls: boolean // 预览xlsx文件设为false；预览xls文件设为true
+  minColLength?: number // excel最少渲染多少列，如果想实现xlsx文件内容有几列，就渲染几列，可以将此值设置为0.
+  minRowLength?: number // excel最少渲染多少行，如果想实现根据xlsx实际函数渲染，可以将此值设置为0.
+  widthOffset?: number // 如果渲染出来的结果感觉单元格宽度不够，可以在默认渲染的列表宽度上再加 Npx宽
+  heightOffset?: number // 在默认渲染的列表高度上再加 Npx高
+  beforeTransformData?: (workbookData: any) => any // 底层通过exceljs获取excel文件内容，通过该钩子函数，可以对获取的excel文件内容进行修改，比如某个单元格的数据显示不正确，可以在此自行修改每个单元格的value值。
+  transformData?: (workbookData: any) => any // 将获取到的excel数据进行处理之后且渲染到页面之前，可通过transformData对即将渲染的数据及样式进行修改，此时每个单元格的text值就是即将渲染到页面上的内容
+}
+export interface FileInfo {
+  data?: string | Blob | ArrayBuffer
+  fileType?: string
+  fileName?: string
+}
--- a/src/constant/file.ts
+++ b/src/constant/file.ts
@@ -41,4 +41,8 @@ export const FileIcon: FileExtendNameIconMap = {
 export const ImageTypes = ['jpg', 'png', 'gif', 'jpeg']

 /** WPS、Office文件类型 */
-export const OfficeTypes = ['ppt', 'pptx', 'doc', 'docx', 'xls', 'xlsx']
+export const OfficeTypes = ['ppt', 'pptx', 'doc', 'docx', 'xls', 'xlsx', 'pdf']
+
+export const WordTypes = ['doc', 'docx']
+
+export const ExcelTypes = ['xls', 'xlsx']
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,7 +1,6 @@
 import { createApp } from 'vue'
 import ArcoVue, { Card, Drawer, Modal } from '@arco-design/web-vue'
 import '@/styles/arco-ui/index.less'
-import 'md-editor-v3/lib/style.css'
 // import '@arco-themes/vue-gi-demo/index.less'
 // import '@arco-design/web-vue/dist/arco.css'

--- a/src/types/components.d.ts
+++ b/src/types/components.d.ts
@@ -12,6 +12,7 @@ declare module 'vue' {
    CronModel: typeof import('./../components/GenCron/CronModel/index.vue')['default']
    DateRangePicker: typeof import('./../components/DateRangePicker/index.vue')['default']
    DayForm: typeof import('./../components/GenCron/CronForm/component/day-form.vue')['default']
+    FilePreview: typeof import('./../components/FilePreview/index.vue')['default']
    GiCellAvatar: typeof import('./../components/GiCell/GiCellAvatar.vue')['default']
    GiCellGender: typeof import('./../components/GiCell/GiCellGender.vue')['default']
    GiCellStatus: typeof import('./../components/GiCell/GiCellStatus.vue')['default']
--- a/src/types/env.d.ts
+++ b/src/types/env.d.ts
@@ -5,8 +5,6 @@ interface ImportMetaEnv {
  readonly VITE_API_PREFIX: string
  readonly VITE_API_BASE_URL: string
  readonly VITE_BASE: string
-  readonly FILE_OPEN_PREVIEW: string
-  readonly FILE_VIEW_SERVER_URL: string
 }

 interface ImportMeta {
--- a/src/views/system/file/main/FileMain/FilePreview.vue
+++ b/src/views/system/file/main/FileMain/FilePreview.vue
@@ -1,101 +0,0 @@
-<template>
-  <div>
-    <a-modal
-        v-model:visible="visible"
-        :title="title"
-        :mask-closable="false"
-        :esc-to-close="false"
-        width="90%"
-        draggable
-    >
-      <div class="modal-content">
-        <div class="modal-header">
-          <!--          <a-button type="primary" @click="onPrintFile"> -->
-          <!--            <template #icon> -->
-          <!--              <icon-printer /> -->
-          <!--            </template> -->
-          <!--            <template #default> -->
-          <!--              打印 -->
-          <!--            </template> -->
-          <!--          </a-button> -->
-          <a-button type="primary" status="success" @click="onDownloadFile">
-            <template #icon>
-              <icon-download />
-            </template>
-            下载
-          </a-button>
-        </div>
-        <div class="iframe-container">
-          <iframe :src="previewUrl" />
-        </div>
-      </div>
-    </a-modal>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-import type { FileItem } from '@/apis/system'
-import { encodeByBase64 } from '@/utils/encrypt'
-
-const emit = defineEmits(['download'])
-
-const visible = ref(false)
-const title = ref('文件预览')
-const fileObject = ref<FileItem>()
-const isLoading = ref(false)
-const error = ref('')
-const previewUrl = ref('')
-
-// 显示弹窗
-function show(fileItem: FileItem) {
-  fileObject.value = fileItem
-  visible.value = true
-  title.value = `${fileItem.name}.${fileItem.extension}`
-  isLoading.value = true
-  error.value = ''
-
-  previewUrl.value = `${import.meta.env.FILE_VIEW_SERVER_URL}/onlinePreview?url=${encodeURIComponent(encodeByBase64(fileItem.url))}`
-}
-
-// 打印文件
-// const onPrintFile = () => {
-// }
-// 下载文件
-const onDownloadFile = () => {
-  emit('download', fileObject.value)
-}
-defineExpose({
-  show
-})
-</script>
-
-<style scoped lang="scss">
-.modal-content {
-  display: flex;
-  flex-direction: column;
-  height: 80vh;
-}
-
-.modal-header {
-  display: flex;
-  justify-content: flex-end;
-  padding: 10px;
-  background: #f5f5f5;
-  border-bottom: 1px solid #e8e8e8;
-}
-
-.iframe-container {
-  overflow: hidden;
-  flex: 1;
-  height: calc(80vh - 50px);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-iframe {
-  width: 100%;
-  height: 100%;
-}
-</style>
--- a/src/views/system/file/main/FileMain/index.vue
+++ b/src/views/system/file/main/FileMain/index.vue
@@ -68,7 +68,7 @@

      <a-empty v-if="!fileList.length" />
    </a-spin>
-    <FilePreview ref="filePreviewRef" @download="args => onDownload(args)" />
+    <FilePreview ref="filePreviewRef" />
    <div class="pagination">
      <a-pagination v-bind="pagination" />
    </div>
@@ -88,10 +88,11 @@ import FileGrid from './FileGrid.vue'
 import useFileManage from './useFileManage'
 import { useTable } from '@/hooks'
 import { type FileItem, type FileQuery, deleteFile, listFile, uploadFile } from '@/apis'
-import { ImageTypes } from '@/constant/file'
+import { ImageTypes, OfficeTypes } from '@/constant/file'
 import 'viewerjs/dist/viewer.css'
 import { downloadByUrl } from '@/utils/downloadFile'
-import FilePreview from '@/views/system/file/main/FileMain/FilePreview.vue'
+import FilePreview from '@/components/FilePreview/index.vue'
+import type { ExcelConfig } from '@/components/FilePreview/type'

 const FileList = defineAsyncComponent(() => import('./FileList.vue'))
 const route = useRoute()
@@ -116,29 +117,44 @@ const {
 const filePreviewRef = ref()
 // 点击文件
 const handleClickFile = (item: FileItem) => {
-  if (JSON.parse(import.meta.env.FILE_OPEN_PREVIEW)) {
-    filePreviewRef.value.show(item)
-  } else {
-    if (ImageTypes.includes(item.extension)) {
-      if (item.url) {
-        const imgList: string[] = fileList.value.filter((i) => ImageTypes.includes(i.extension)).map((a) => a.url || '')
-        const index = imgList.findIndex((i) => i === item.url)
-        if (imgList.length) {
-          viewerApi({
-            options: {
-              initialViewIndex: index
-            },
-            images: imgList
-          })
-        }
+  if (ImageTypes.includes(item.extension)) {
+    if (item.url) {
+      const imgList: string[] = fileList.value.filter((i) => ImageTypes.includes(i.extension)).map((a) => a.url || '')
+      const index = imgList.findIndex((i) => i === item.url)
+      if (imgList.length) {
+        viewerApi({
+          options: {
+            initialViewIndex: index
+          },
+          images: imgList
+        })
      }
    }
-    if (item.extension === 'mp4') {
-      previewFileVideoModal(item)
-    }
-    if (item.extension === 'mp3') {
-      previewFileAudioModal(item)
+  }
+  if (OfficeTypes.includes(item.extension)) {
+    const excelConfig: ExcelConfig = {
+      xls: item.extension === 'xls',
+      minColLength: 0,
+      minRowLength: 0,
+      widthOffset: 10,
+      heightOffset: 10,
+      beforeTransformData: (workbookData) => {
+        return workbookData
+      },
+      transformData: (workbookData) => {
+        return workbookData
+      }
    }
+    filePreviewRef.value.onPreview({
+      fileInfo: { data: item.url, fileName: item.name, fileType: item.extension },
+      excelConfig
+    })
+  }
+  if (item.extension === 'mp4') {
+    previewFileVideoModal(item)
+  }
+  if (item.extension === 'mp3') {
+    previewFileAudioModal(item)
  }
 }
 // 下载文件