From 81eccc177dd12dcacaddaf40ede703dbdf38651c Mon Sep 17 00:00:00 2001
From: suixinee <1172141559@qq.com>
Date: Fri, 22 Sep 2023 10:47:16 +0800
Subject: [PATCH] =?UTF-8?q?=E5=88=9D=E6=AD=A5=E6=96=87=E4=BB=B6=E9=A2=84?=
 =?UTF-8?q?=E8=A7=88=E7=BB=84=E4=BB=B6=E6=9E=84=E5=BB=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/package.json                    |  4 ++
 web/src/components/office/docx.vue  | 36 +++++++++++++++++
 web/src/components/office/excel.vue | 33 ++++++++++++++++
 web/src/components/office/index.vue | 60 +++++++++++++++++++++++++++++
 web/src/components/office/pdf.vue   | 36 +++++++++++++++++
 5 files changed, 169 insertions(+)
 create mode 100644 web/src/components/office/docx.vue
 create mode 100644 web/src/components/office/excel.vue
 create mode 100644 web/src/components/office/index.vue
 create mode 100644 web/src/components/office/pdf.vue

diff --git a/web/package.json b/web/package.json
index 15460d1a4..397edcf5d 100644
--- a/web/package.json
+++ b/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": {
diff --git a/web/src/components/office/docx.vue b/web/src/components/office/docx.vue
new file mode 100644
index 000000000..36bba79a3
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/web/src/components/office/excel.vue b/web/src/components/office/excel.vue
new file mode 100644
index 000000000..ac449dac6
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/web/src/components/office/index.vue b/web/src/components/office/index.vue
new file mode 100644
index 000000000..1d12dc447
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/web/src/components/office/pdf.vue b/web/src/components/office/pdf.vue
new file mode 100644
index 000000000..8098f06ff
--- /dev/null
+++ b/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>
\ No newline at end of file