@chenghongyu/xpt-file-viewer 1.1.0

package/src/components/file/preview/KkFileViewer.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="zfile-kkfile-viewer">
+    <div v-if="isLoading" class="viewer-status">
+      正在加载预览, 请稍候...
+    </div>
+
+    <div v-else-if="errorMessage" class="viewer-status error">
+      加载预览失败：{{ errorMessage }}
+    </div>
+
+    <iframe v-else-if="iframeSrc"
+            :src="iframeSrc"
+            width="100%"
+            height="100%"
+            frameborder="0">
+    </iframe>
+  </div>
+</template>
+
+<script setup>
+import { ref, watchEffect } from 'vue';
+import useStorageConfigStore from "~/stores/storage-config";
+import { buildKkFileViewUrl } from "~/utils/models/path";
+
+const storageConfigStore = useStorageConfigStore();
+
+const props = defineProps({
+  url: String,
+  name: String
+});
+
+const isLoading = ref(true);
+const errorMessage = ref('');
+const iframeSrc = ref('');
+
+watchEffect(() => {
+  isLoading.value = true;
+  errorMessage.value = '';
+  iframeSrc.value = '';
+
+  const kkFileViewUrl = storageConfigStore.globalConfig.kkFileViewUrl;
+  const fileUrl = props.url;
+  const originalFileName = props.name;
+
+  if (!kkFileViewUrl) {
+    errorMessage.value = "预览服务地址未配置。";
+    isLoading.value = false;
+    return;
+  }
+
+  if (!fileUrl) {
+    errorMessage.value = "文件URL无效，无法预览。";
+    isLoading.value = false;
+    return;
+  }
+
+  if (!originalFileName) {
+    errorMessage.value = "文件名无效，无法预览。";
+    isLoading.value = false;
+    return;
+  }
+
+  const file = { name: originalFileName, url: fileUrl };
+
+  iframeSrc.value = buildKkFileViewUrl(file, kkFileViewUrl);
+  isLoading.value = false;
+});
+</script>
+
+<style scoped>
+.zfile-kkfile-viewer {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #f7f7f7;
+}
+.viewer-status {
+  color: #888;
+  font-size: 16px;
+}
+.viewer-status.error {
+  color: #f56c6c;
+}
+</style>

package/src/components/file/preview/KkFileViewerDialog.vue

@@ -0,0 +1,42 @@
+<template>
+  <z-dialog
+    v-model="visible"
+    draggable
+    top="5vh"
+    width="90%"
+    class="zfile-kkfile-viewer-dialog"
+    :title="name"
+    :showFooter="false"
+  >
+    <kkfileview-viewer v-if="visible" :url="url" :name="name" />
+  </z-dialog>
+</template>
+
+<script setup>
+import { defineAsyncComponent } from 'vue';
+import ZDialog from "~/components/common/dialog/ZDialog.vue";
+import MarkdownViewerDialogAsyncLoading from "~/components/file/preview/MarkdownViewerDialogAsyncLoading.vue";
+import useKkFileViewDialog from "~/composables/file/useKkFileViewDialog";
+
+// 使用异步组件加载，提升性能
+const KkfileviewViewer = defineAsyncComponent({
+  loader: () => import("~/components/file/preview/KkFileViewer.vue"),
+  loadingComponent: MarkdownViewerDialogAsyncLoading
+});
+
+const { visible, name, url } = useKkFileViewDialog();
+</script>
+
+<style scoped lang="scss">
+/* 样式可以复用 OfficeViewerDialog 的 */
+:deep(.el-dialog) {
+  @apply p-0 h-[80vh];
+  .z-dialog-content { @apply h-[80vh]; }
+  .el-dialog__header { @apply p-2; }
+  &.is-fullscreen {
+    height: 100%;
+    .z-dialog-content { height: calc(100vh - 41px); }
+  }
+  .el-dialog__footer { display: none; }
+}
+</style>

package/src/components/file/preview/MarkdownViewer.vue

@@ -0,0 +1,102 @@
+<template>
+	<div class="content">
+		<div class="dialog-scroll markdown-body" v-html="markdownHtml"></div>
+	</div>
+</template>
+
+<script setup>
+import {marked} from 'marked';
+import { computed, onMounted, onUpdated, ref } from "vue";
+import hljs from "highlight.js/lib/core";
+import 'highlight.js/styles/github.css';
+import 'github-markdown-css';
+import { ElMessage } from 'element-plus';
+import { getFileTextReq } from "~/api/home/common";
+
+let props = defineProps({
+	fileUrl: String,
+	fileName: String
+});
+
+const fileContent = ref('');
+
+onMounted(() => {
+	let fileUrl = props.fileUrl;
+	getFileTextReq(fileUrl, 'text').then((res) => {
+		fileContent.value = res.data;
+	}).catch((e) => {
+    ElMessage({
+      message: `加载文本文件失败. 请检查此地址是否有效或是否限制了跨域访问.`,
+      type: 'error',
+      duration: 0,
+      showClose: true,
+      grouping: true
+    })
+  });
+})
+
+let markdownHtml = computed(() => {
+	// url 新窗口打开.
+	let renderer = new marked.Renderer();
+	renderer.link = function() {
+		let link = marked.Renderer.prototype.link.apply(this, arguments);
+		return link.replace("<a","<a target='_blank'");
+	};
+	marked.setOptions({
+		renderer: renderer
+	});
+
+	return marked(fileContent.value, {
+		highlight: function(code) {
+			return hljs.highlightAuto(code).value;
+		}
+	});
+})
+
+import CodeCopy from '~/components/file/preview/CopyCode.vue';
+import { createVNode, render } from "vue";
+
+onUpdated(() => {
+  document.querySelectorAll('pre').forEach(el => {
+    if (el.classList.contains('code-copy-added')) return
+    //   https://cn.vuejs.org/v2/api/index.html#Vue-extend
+    /* 使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象 */
+
+    let codeCopyVNode = createVNode(CodeCopy, {
+      code: el.innerText,
+    });
+    let mountNode = document.createElement("div");
+    render(codeCopyVNode, mountNode);
+    el.classList.add('code-copy-added')
+    el.classList.add('hljs')
+    el.appendChild(mountNode)
+  })
+})
+
+</script>
+
+<style scoped>
+.content {
+  padding: 10px 0;
+}
+
+.content .markdown-body >>> pre {
+	margin-right: 20px;
+}
+
+
+.content .markdown-body >>> pre:hover .copy-btn {
+  opacity: 1;
+}
+
+.dialog-scroll {
+	height: 80vh;
+	overflow-y: auto;
+	overflow-x: hidden;
+	margin: 0;
+}
+
+.content >>> .code-copy-added {
+  position: relative;
+}
+</style>

package/src/components/file/preview/MarkdownViewerAsyncLoading.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="w-full h-full">
+      <el-skeleton animated>
+        <template #template>
+          <el-skeleton-item variant="p" class="!w-1/4"></el-skeleton-item>
+          <br>
+          <el-skeleton-item variant="p" class="!w-1/2"></el-skeleton-item>
+        </template>
+      </el-skeleton>
+  </div>
+</template>
+
+<script setup>
+</script>
+
+<style lang="scss" scoped>
+</style>

package/src/components/file/preview/MarkdownViewerDialogAsyncLoading.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="p-5 w-full h-[75vh]">
+      <el-skeleton animated :count="5">
+      </el-skeleton>
+  </div>
+</template>
+
+<script setup>
+</script>
+
+<style lang="scss" scoped>
+</style>

package/src/components/file/preview/OfficeViewer.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="zfile-office-viewer">
+    <div id="office-body"></div>
+  </div>
+</template>
+
+<script setup>
+
+import { onMounted } from "vue";
+import useStorageConfigStore from "~/stores/storage-config";
+import { getOnlyOfficeConfigTokenReq } from "~/api/home/only-office.js";
+import useRouterData from "~/composables/useRouterData";
+import { concatPath } from "~/utils";
+import useFilePwd from "~/composables/file/useFilePwd";
+import { ElMessage } from "element-plus";
+let { getPathPwd } = useFilePwd();
+let storageConfigStore = useStorageConfigStore();
+
+let { storageKey, currentPath } = useRouterData();
+
+// 组件接收的属性：
+//  fileName:   文件名
+const props = defineProps({
+  fileName: String
+});
+
+onMounted(() => {
+  loadScript(`${storageConfigStore.globalConfig.onlyOfficeUrl}/web-apps/apps/api/documents/api.js`, () => {
+    let filePathAndName = concatPath(currentPath.value, props.fileName);
+
+    let fileInfo = {
+      storageKey: storageKey.value,
+      path: filePathAndName,
+      password: getPathPwd()
+    }
+
+    getOnlyOfficeConfigTokenReq(fileInfo).then(res => {
+      let jsonObj = res.data;
+      const docEditor = new DocsAPI.DocEditor("office-body", jsonObj);
+    })
+  })
+})
+
+
+function loadScript(src, callback) {
+  let script = document.createElement('script'),
+      head = document.getElementsByTagName('head')[0];
+  script.type = 'text/javascript';
+  script.charset = 'UTF-8';
+  script.src = src;
+  if (script.addEventListener) {
+    script.addEventListener('load', function () {
+      callback();
+    }, false);
+    script.addEventListener('error', function () {
+      ElMessage.warning("调用在线文档服务失败，请检查在线文档服务是否正常");
+    }, false);
+  } else if (script.attachEvent) {
+    script.attachEvent('onreadystatechange', function () {
+      var target = window.event.srcElement;
+      if (target.readyState === 'loaded') {
+        callback();
+      }
+    });
+  }
+  head.appendChild(script);
+}
+</script>
+
+<style scoped>
+
+.zfile-office-viewer, #office-body {
+  height: 100%;
+  width: 100%;
+}
+</style>

package/src/components/file/preview/OfficeViewerDialog.vue

@@ -0,0 +1,55 @@
+<template>
+  <z-dialog
+    v-model="visible"
+    draggable
+    top="5vh"
+    width="90%"
+    class="zfile-office-viewer-dialog"
+    :title="name"
+    :showFooter="false"
+  >
+    <office-viewer v-if="visible" :file-name="name" />
+  </z-dialog>
+</template>
+
+<script setup>
+import ZDialog from "~/components/common/dialog/ZDialog.vue";
+import MarkdownViewerDialogAsyncLoading from "~/components/file/preview/MarkdownViewerDialogAsyncLoading.vue";
+
+const OfficeViewer = defineAsyncComponent({
+  loader: () => import("~/components/file/preview/OfficeViewer.vue"),
+  loadingComponent: MarkdownViewerDialogAsyncLoading
+})
+
+import useOfficeViewerDialog from "~/composables/file/useOfficeViewerDialog";
+const { visible, name } = useOfficeViewerDialog();
+</script>
+
+<style scoped lang="scss">
+:deep(.el-dialog) {
+  // 内容无边框
+  @apply p-0 h-[80vh];
+
+  .z-dialog-content {
+    @apply h-[80vh];
+  }
+
+  // 标题有边框
+  .el-dialog__header {
+    @apply p-2;
+  }
+
+  // 全屏时，内容高度自适应
+  &.is-fullscreen {
+    height: 100%;
+    .z-dialog-content {
+      height: calc(100vh - 41px);
+    }
+  }
+
+  // 隐藏底部按钮
+  .el-dialog__footer {
+    display: none;
+  }
+}
+</style>

package/src/components/file/preview/PdfViewer.vue

@@ -0,0 +1,157 @@
+<template>
+  <div class="zfile-pdf-viewer">
+    <div class="app-header">
+      <div v-if="isLoading">
+        <span v-if="loadingProgress < 100">
+          加载 {{ loadingProgress }}%
+        </span>
+        <span v-else>
+          渲染所有页面中...
+        </span>
+      </div>
+      <div v-else>
+        <span v-if="showAllPages">
+          共 {{ pageCount }} 页
+        </span>
+
+        <span v-else>
+          <button :disabled="page <= 1" @click="page--">❮</button>
+          {{ page }} / {{ pageCount }}
+          <button :disabled="page >= pageCount" @click="page++">❯</button>
+        </span>
+      </div>
+
+      <span v-show="!isLoading">
+        <button class="px-1 sm:px-4" @click="pdfViewCanvasWidthNum-=5">-</button>
+        <span>
+          <span class="hidden sm:inline">缩放比例</span>
+          {{pdfViewCanvasWidthNum}} %
+        </span>
+        <button class="px-1 sm:px-4" @click="pdfViewCanvasWidthNum+=5">+</button>
+      </span>
+
+      <label :class="isLoading ? 'invisible' : 'visible'">
+        <input v-model="showAllPages" type="checkbox">
+        显示所有页
+      </label>
+    </div>
+
+    <div class="app-content">
+      <vue-pdf-embed
+        annotationLayer
+        textLayer
+        ref="pdfRef"
+        :source="doc"
+        :page="page"
+        @rendered="handleDocumentRender"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, watch, ref } from 'vue'
+import VuePdfEmbed, { useVuePdfEmbed } from 'vue-pdf-embed'
+import { useMagicKeys } from '@vueuse/core'
+const { ArrowLeft, ArrowRight, NumpadAdd, NumpadSubtract } = useMagicKeys()
+import { ElMessage } from 'element-plus'
+// optional styles
+import 'vue-pdf-embed/dist/styles/annotationLayer.css'
+import 'vue-pdf-embed/dist/styles/textLayer.css'
+
+// 组件接收的属性：
+//  fileUrl:    文件下载路径
+//  fileName:   文件名
+const props = defineProps({
+  fileUrl: String,
+  fileName: String
+});
+
+const pdfRef = ref();
+
+const pdfViewCanvasWidthNum = ref(100);
+// 图片外部容器宽度, 100 / 图片列数
+let pdfViewCanvasWidth = computed(() => {
+  return `${pdfViewCanvasWidthNum.value}%`;
+})
+
+let isLoading = ref(true);
+let page = ref(null);
+let pageCount = ref(1);
+let showAllPages = ref(true);
+
+watch(() => showAllPages.value, () => {
+  page.value = showAllPages.value ? null : 1;
+});
+
+const handleDocumentRender = (a) => {
+  pageCount.value = pdfRef.value.doc.numPages;
+  isLoading.value = false;
+};
+
+const handlerDocumentError = (error) => {
+  isLoading.value = false;
+  ElMessage.error("PDF 加载失败");
+};
+
+const loadingProgress = ref(0);
+const handleDocumentLoadProgress = (progressData) => {
+  // 保留2位小数
+  loadingProgress.value = (progressData.loaded / progressData.total * 100).toFixed(2);
+};
+
+// 支持按键翻页
+watch(() => [ArrowLeft.value, ArrowRight.value], (value) => {
+  if (isLoading.value) return;
+  if (showAllPages.value) return;
+  if (value[0] && page.value > 1) {
+    page.value--;
+  }
+  if (value[1] && page.value < pageCount.value) {
+    page.value++;
+  }
+})
+
+// 支持按键缩放
+watch(() => [NumpadSubtract.value, NumpadAdd.value], (value) => {
+  if (value[0]) {
+    pdfViewCanvasWidthNum.value -= 5;
+  }
+  if (value[1]) {
+    pdfViewCanvasWidthNum.value += 5;
+  }
+})
+
+const { doc } = useVuePdfEmbed( {
+  source: props.fileUrl,
+  onProgress: handleDocumentLoadProgress,
+  onError: handlerDocumentError,
+})
+</script>
+
+<style scoped lang="scss">
+.vue-pdf-embed {
+  :deep(> div) {
+    box-shadow: 0 2px 8px 4px rgba(0, 0, 0, 0.1);
+    @apply w-full h-full mt-2;
+  }
+
+  :deep(canvas) {
+    width: v-bind('pdfViewCanvasWidth') !important;
+    height: 100% !important;
+    margin: 0 auto;
+  }
+}
+
+.app-header {
+  box-shadow: 0 2px 8px 4px rgba(0, 0, 0, 0.1);
+  background-color: #555;
+  color: #ddd;
+  @apply flex content-between justify-between p-2 sm:p-4 bg-gray-600;
+
+}
+
+.app-content {
+  padding: 24px 0;
+}
+</style>

package/src/components/file/preview/PdfViewerDialog.vue

@@ -0,0 +1,41 @@
+<template>
+  <z-dialog
+    v-model="visible"
+    draggable
+    top="5vh"
+    class="zfile-pdf-viewer-dialog"
+    :title="name"
+    :showFooter="false"
+  >
+    <pdf-viewer v-if="visible" :file-name="name" :file-url="url" />
+  </z-dialog>
+</template>
+
+<script setup>
+import ZDialog from "~/components/common/dialog/ZDialog.vue";
+import MarkdownViewerDialogAsyncLoading from "~/components/file/preview/MarkdownViewerDialogAsyncLoading.vue";
+
+const PdfViewer = defineAsyncComponent({
+  loader: () => import("~/components/file/preview/PdfViewer.vue"),
+  loadingComponent: MarkdownViewerDialogAsyncLoading
+})
+
+import usePdfViewerDialog from "~/composables/file/usePdfViewerDialog";
+const { visible, name, url } = usePdfViewerDialog();
+</script>
+
+<style scoped lang="scss">
+:deep(.zfile-pdf-viewer-dialog) {
+  @apply min-w-[90%] sm:min-w-[80%] md:min-w-[70%] lg:min-w-[60%] xl:min-w-[50%];
+
+  .el-dialog__body {
+    @apply h-[80vh] overflow-auto;
+  }
+
+  &.is-fullscreen {
+    .el-dialog__body {
+      height: calc(100vh - 49px - 16px);
+    }
+  }
+}
+</style>