初步文件预览组件构建

web/package.json

@@ -11,6 +11,9 @@
     },
     "dependencies": {
         "@element-plus/icons-vue": "^2.1.0",
+        "@vue-office/docx": "^1.3.0",
+        "@vue-office/excel": "^1.4.5",
+        "@vue-office/pdf": "^1.5.3",
         "@wangeditor/editor": "^5.1.23",
         "@wangeditor/editor-for-vue": "^5.1.12",
         "axios": "^1.4.0",
@@ -28,6 +31,7 @@
         "spark-md5": "^3.0.2",
         "tailwindcss": "^3.3.3",
         "vue": "^3.3.4",
+        "vue-demi": "^0.13.11",
         "vue-router": "^4.2.4"
     },
     "devDependencies": {

web/src/components/office/docx.vue

@@ -0,0 +1,36 @@
+<template>
+  <vue-office-docx :src="docx" @rendered="rendered">
+
+  </vue-office-docx>
+</template>
+<script>
+export default {
+  name: "Docx"
+}
+</script>
+<script setup>
+import {ref, watch} from 'vue'
+
+// 引入VueOfficeDocx组件
+import VueOfficeDocx from '@vue-office/docx'
+// 引入相关样式
+import '@vue-office/docx/lib/index.css'
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: () => ""
+  }
+})
+const docx = ref(null)
+watch(
+    () => props.modelValue,
+    value => docx.value = value,
+    {immediate: true}
+)
+const rendered = () => {
+}
+</script>
+<style lang="scss" scoped>
+
+</style>

web/src/components/office/excel.vue

@@ -0,0 +1,33 @@
+<template>
+  <VueOfficeExcel :src="excel" @rendered="renderedHandler" @error="errorHandler" style="height: 100vh;width: 100vh"/>
+</template>
+<script>
+export default {
+  name: 'Excel'
+}
+</script>
+<script setup>
+//引入VueOfficeExcel组件
+import VueOfficeExcel from '@vue-office/excel'
+//引入相关样式
+import '@vue-office/excel/lib/index.css'
+import {ref, watch} from 'vue'
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: () => ""
+  }
+})
+const excel = ref('')
+watch(() => props.modelValue, val => excel.value = val, {immediate: true})
+const renderedHandler = () => {
+
+}
+const errorHandler = () => {
+
+}
+</script>
+<style>
+
+</style>

web/src/components/office/index.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="office border border-solid border-gray-100 h-full">
+    <el-row>
+      <div v-if="ext==='docx'">
+        <Docx v-model="fullFileURL" />
+      </div>
+      <div v-else-if="ext==='pdf'">
+        <Pdf v-model="fullFileURL" />
+      </div>
+      <div v-else-if="ext==='xlsx'">
+        <Excel v-model="fullFileURL" />
+      </div>
+      <div v-else-if="ext==='image'">
+        <el-image :src="fullFileURL" lazy/>
+      </div>
+    </el-row>
+
+  </div>
+</template>
+<script>
+export default {
+  name: "Office"
+}
+</script>
+<script setup>
+import {ref, watch, computed} from "vue"
+import Docx from "@/components/office/docx.vue";
+import Pdf from "@/components/office/pdf.vue";
+import Excel from "@/components/office/excel.vue";
+
+const path = ref(import.meta.env.VITE_BASE_API)
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: () => ""
+  }
+})
+const fileUrl = ref("")
+const ext = ref("")
+watch(
+    () => props.modelValue,
+    val => {
+      fileUrl.value = val
+      const fileExt = val.split(".")[1] || ''
+      const image = ['png', 'jpg', 'jpge', 'gif']
+      ext.value = image.includes(fileExt) ? 'image' : fileExt
+    },
+    {immediate: true}
+)
+const fullFileURL = computed(() => {
+  return path.value + '/' + fileUrl.value
+})
+</script>
+<style lang="scss" scoped>
+.office {
+  height: 400px;
+  width: 100%;
+}
+</style>

web/src/components/office/pdf.vue

@@ -0,0 +1,36 @@
+<template>
+  <vue-office-pdf
+
+      :src="pdf"
+      @rendered="renderedHandler"
+      @error="errorHandler"
+  />
+</template>
+<script>
+export default {
+  name: "Pdf"
+}
+</script>
+<script setup>
+import {ref, watch} from "vue"
+
+//引入VueOfficeDocx组件
+import VueOfficePdf from "@vue-office/pdf";
+//引入相关样式
+import '@vue-office/docx/lib/index.css'
+console.log("pdf===>")
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: () => ""
+  }
+})
+const pdf = ref(null)
+watch(() => props.modelValue, val => pdf.value = val, {immediate: true})
+const renderedHandler = () => {
+  console.log("pdf 加载成功")
+}
+const errorHandler = () => {
+  console.log("pdf 错误")
+}
+</script>