✨ init Project

src/components/office/docx.vue

@@ -0,0 +1,31 @@
+<template>
+  <vue-office-docx :src="docx" @rendered="rendered" />
+</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 model = defineModel({
+    type: String
+  })
+
+  const docx = ref(null)
+  watch(
+    () => model,
+    (value) => {
+      docx.value = value
+    },
+    { immediate: true }
+  )
+  const rendered = () => {}
+</script>
+<style lang="scss" scoped></style>

src/components/office/excel.vue

@@ -0,0 +1,36 @@
+<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>

src/components/office/index.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="border border-solid border-gray-100 h-full w-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 model = defineModel({ type: String })
+
+  const fileUrl = ref('')
+  const ext = ref('')
+  watch(
+    () => model,
+    (val) => {
+      fileUrl.value = val
+      const fileExt = val.split('.')[1] || ''
+      const image = ['png', 'jpg', 'jpeg', 'gif']
+      ext.value = image.includes(fileExt?.toLowerCase()) ? 'image' : fileExt
+    },
+    { immediate: true }
+  )
+  const fullFileURL = computed(() => {
+    return path.value + '/' + fileUrl.value
+  })
+</script>

src/components/office/pdf.vue

@@ -0,0 +1,39 @@
+<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>