feat : 文件预览,项目详情文件表格展示

src/components/filePreview/DocxPreview.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="docx-preview">
+    <div
+        ref="docxDiv"
+        class="docxDiv"
+        v-loading="loading"
+    ></div>
+  </div>
+</template>
+
+<script setup lang="jsx">
+import {renderAsync} from "docx-preview";
+import axios from "axios";
+
+let docx = import.meta.glob("docx-preview"); // vite不支持require
+
+const props = defineProps({
+  fileUrl: {
+    type: String,
+    default: ''
+  }
+})
+
+const loading = ref(false);
+
+const previewFile = () => {
+  loading.value = true;
+  axios.request({
+    url: props.fileUrl,
+    method: 'get',
+    responseType: 'blob'
+  }).then((response) => {
+    let docData = response.data;
+    let docxDiv = document.getElementsByClassName("docxDiv");
+    renderAsync(docData, docxDiv[0], null, {
+      inWrapper: true, // 启用围绕文档内容渲染包装器
+      ignoreWidth: false, // 禁止页面渲染宽度
+      ignoreHeight: false, // 禁止页面渲染高度
+      ignoreFonts: false, // 禁止字体渲染
+      breakPages: true, // 在分页符上启用分页
+      ignoreLastRenderedPageBreak: true, //禁用lastRenderedPageBreak元素的分页
+      experimental: false, //启用实验性功能（制表符停止计算）
+      trimXmlDeclaration: true, //如果为真，xml声明将在解析之前从xml文档中删除
+      debug: false,
+    }).then((res) => {
+      loading.value = false;
+    });
+  }).catch((error) => {
+    console.log(error);
+  });
+};
+
+previewFile()
+
+</script>
+<style lang="scss">
+.docx-preview {
+  .docx-wrapper > section.docx {
+    margin-bottom: 0 !important;
+  }
+
+  .docx-wrapper {
+    height: 650px !important;
+    padding: 10px !important;
+
+    .docx {
+      width: auto !important;
+      min-height: 600px !important;
+      overflow-y: scroll;
+      padding: 20px !important;
+
+      &::-webkit-scrollbar {
+        width: 6px;
+      }
+
+      // 滚动条轨道
+      &::-webkit-scrollbar-track {
+        background: rgb(239, 239, 239);
+        border-radius: 2px;
+      }
+
+      // 小滑块
+      &::-webkit-scrollbar-thumb {
+        background: rgba(80, 81, 82, 0.29);
+        border-radius: 10px;
+      }
+    }
+  }
+}
+</style>
+

src/components/filePreview/ImagePreview.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="img-preview" >
+    <img id="previewImg" :src="fileUrl" :style="{width: fullscreen?windowWidth+'px':'',height: fullscreen?'auto':'650px;'}" alt="Preview"/>
+  </div>
+</template>
+
+<script setup>
+const emit = defineEmits(["update:fileUrl"])
+const props = defineProps({
+  fileUrl: {
+    type: String,
+    default: ''
+  },
+  fullscreen: {
+    type: Boolean,
+    default:false
+  }
+})
+const showImagePreview = ref(true)
+const dialogWidth = ref('')
+const dialogHeight = ref('')
+// 屏幕宽度
+const windowWidth = ref(0)
+// 屏幕高度
+const windowHeight = ref(0)
+// onMounted(() => {
+// })
+// 获取屏幕尺寸
+const getWindowResize = function () {
+  windowWidth.value = window.innerWidth-32
+  windowHeight.value = window.innerHeight
+}
+getWindowResize()
+window.addEventListener('resize', getWindowResize)
+nextTick(() => {
+  const previewImg = document.getElementById('previewImg');
+  // console.log(previewImg)
+  let offsetHeight = previewImg?.offsetHeight
+  // console.log(offsetHeight)
+  if (offsetHeight > 750){
+  //   previewImg?.offsetHeight = 750
+  }
+})
+
+// dialogWidth.value=document.getElementById('previewImg')?.offsetWidth||1500
+// dialogWidth.value=document.getElementById('previewImg')?.offsetHeight||750
+
+</script>
+
+<style lang="scss">
+.img-preview {
+  display: flex;
+  justify-content: center;
+}
+
+</style>

src/components/filePreview/PdfPreview.vue

@@ -0,0 +1,49 @@
+<template>
+  <!--  <iframe height="650px" width="100%" :src="fileUrl" frameborder="0"></iframe>-->
+  <vue-pdf-app style="height: 100vh; width: 100vw" :pdf="fileUrl" :config="pdfPreviewConfig"></vue-pdf-app>
+</template>
+
+<script setup lang="jsx">
+import VuePdfApp from "vue3-pdf-app";
+import "vue3-pdf-app/dist/icons/main.css";
+
+const pdfPreviewConfig = ref({
+  sidebar: false,//左侧目录展示
+  secondaryToolbar: false,//二级工具栏
+  toolbar: false,//工具栏显示
+  errorWrapper: false,
+})
+const props = defineProps({
+  fileUrl: {
+    type: String,
+    default: ''
+  }
+})
+</script>
+
+<style lang="scss">
+#vuePdfApp {
+  width: auto !important;
+  height: 750px !important;
+}
+
+#viewerContainer {
+  &::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+
+  // 滚动条轨道
+  &::-webkit-scrollbar-track {
+    background: rgb(239, 239, 239);
+    border-radius: 2px;
+  }
+
+  // 小滑块
+  &::-webkit-scrollbar-thumb {
+    background: rgba(80, 81, 82, 0.29);
+    border-radius: 10px;
+  }
+
+}
+</style>

src/components/filePreview/index.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="file-preview">
+    <el-dialog id="dialog" :border="false" width="1500" :style="{height: fullscreen?'':'750px;'}" top="10vh"
+               :fullscreen="fullscreen"
+               :title="fileName" :show-close="true" :visible.sync="showPreview" v-model="showPreview"
+               :append-to-body="false"
+               :close-on-click-modal="true"
+    >
+      <pdf-preview :file-url="fileUrl" :fullscreen="fullscreen" v-if="fileType === 'pdf'"/>
+      <docx-preview :file-url="fileUrl" :fullscreen="fullscreen" v-if="fileType === 'docx'"/>
+      <image-preview :fileUrl="fileUrl" :fullscreen="fullscreen" :fileName="fileName" v-if="fileType === 'png'"/>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+const emit = defineEmits(["update:fileUrl"])
+const props = defineProps({
+  fileUrl: {
+    type: String,
+    default: ''
+  },
+  fileType: {
+    type: String,
+    default: ''
+  },
+  fileName: {
+    type: String,
+    default: ''
+  },
+  //弹窗是否铺满全屏
+  fullscreen: {
+    type: Boolean,
+    default: false
+  }
+})
+const showPreview = ref(true)
+const checkImgType=()=>{
+  if (!/\.(jpg|JPG|jpeg|png|PNG|GIF|SVG|TIFF|tiff|tif|ico|xbm|pjp)$/.test(props.fileType)) {
+    return  false;
+  }else{
+    return true;
+  }
+}
+
+</script>
+
+<style lang="scss">
+.file-preview {
+  .el-overlay-dialog {
+    left: 0 !important;
+
+  }
+
+  .el-dialog__headerbtn {
+    .el-dialog__close {
+      font-size: 30px;
+
+    }
+  }
+
+  .el-dialog__body {
+    padding: 0 !important;
+  }
+}
+
+</style>