From 4f44f72a2c2436513065921901a93e40785cd01a Mon Sep 17 00:00:00 2001
From: xiaoxian521 <1923740402@qq.com>
Date: Sat, 23 Mar 2024 15:28:42 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0`Word`=E3=80=81`Excel?=
 =?UTF-8?q?`=E9=A2=84=E8=A7=88=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 build/optimize.ts          |  2 ++
 locales/en.yaml            |  2 ++
 locales/zh-CN.yaml         |  2 ++
 package.json               |  2 ++
 pnpm-lock.yaml             | 36 ++++++++++++++++++++++++++++++++++++
 src/router/modules/able.ts | 16 ++++++++++++++++
 src/views/able/excels.vue  | 27 +++++++++++++++++++++++++++
 src/views/able/word.vue    | 18 ++++++++++++++++++
 8 files changed, 105 insertions(+)
 create mode 100644 src/views/able/excels.vue
 create mode 100644 src/views/able/word.vue

diff --git a/build/optimize.ts b/build/optimize.ts
index 9beb4f0ea4..20b0e543d1 100644
--- a/build/optimize.ts
+++ b/build/optimize.ts
@@ -36,6 +36,8 @@ const include = [
   "vue-json-pretty",
   "@logicflow/core",
   "@pureadmin/utils",
+  "@vue-office/docx",
+  "@vue-office/excel",
   "@wangeditor/editor",
   "responsive-storage",
   "plus-pro-components",
diff --git a/locales/en.yaml b/locales/en.yaml
index f0e64e98b3..7b4a35aac9 100644
--- a/locales/en.yaml
+++ b/locales/en.yaml
@@ -126,6 +126,8 @@ menus:
   hsSwiper: Swiper Plugin
   hsVirtualList: Virtual List
   hsPdf: PDF Preview
+  hsWord: Word Preview
+  hsExcels: Excel Preview
   hsExcel: Export Excel
   hsInfiniteScroll: Table Infinite Scroll
   hsSensitive: Sensitive Filter
diff --git a/locales/zh-CN.yaml b/locales/zh-CN.yaml
index 66a7ff65f8..7af287541b 100644
--- a/locales/zh-CN.yaml
+++ b/locales/zh-CN.yaml
@@ -126,6 +126,8 @@ menus:
   hsSwiper: Swiper插件
   hsVirtualList: 虚拟列表
   hsPdf: PDF预览
+  hsWord: Word预览
+  hsExcels: Excel预览
   hsExcel: 导出Excel
   hsInfiniteScroll: 表格无限滚动
   hsSensitive: 敏感词过滤
diff --git a/package.json b/package.json
index f9b8fa9555..cfac208dd8 100644
--- a/package.json
+++ b/package.json
@@ -58,6 +58,8 @@
     "@pureadmin/utils": "^2.4.7",
     "@vue-flow/background": "^1.3.0",
     "@vue-flow/core": "^1.33.4",
+    "@vue-office/docx": "^1.6.0",
+    "@vue-office/excel": "^1.7.2",
     "@vueuse/core": "^10.9.0",
     "@vueuse/motion": "^2.1.0",
     "@wangeditor/editor": "^5.1.23",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8827fec02b..3ade30076d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -35,6 +35,12 @@ dependencies:
   '@vue-flow/core':
     specifier: ^1.33.4
     version: 1.33.4(vue@3.4.21)
+  '@vue-office/docx':
+    specifier: ^1.6.0
+    version: 1.6.0(vue-demi@0.14.7)(vue@3.4.21)
+  '@vue-office/excel':
+    specifier: ^1.7.2
+    version: 1.7.2(vue-demi@0.14.7)(vue@3.4.21)
   '@vueuse/core':
     specifier: ^10.9.0
     version: 10.9.0(vue@3.4.21)
@@ -2630,6 +2636,36 @@ packages:
       - '@vue/composition-api'
     dev: false
 
+  /@vue-office/docx@1.6.0(vue-demi@0.14.7)(vue@3.4.21):
+    resolution: {integrity: sha512-OKEapOPq223uszA8mRSOWPhdfBchJa6sIqP46eMrMMe5RSUrG9m3QE/o0JBIaMgxDrtNd7aI9CvF2kDvb7G2hw==}
+    requiresBuild: true
+    peerDependencies:
+      '@vue/composition-api': ^1.7.1
+      vue: ^2.0.0 || >=3.0.0
+      vue-demi: ^0.14.6
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+    dependencies:
+      vue: 3.4.21(typescript@5.4.3)
+      vue-demi: 0.14.7(vue@3.4.21)
+    dev: false
+
+  /@vue-office/excel@1.7.2(vue-demi@0.14.7)(vue@3.4.21):
+    resolution: {integrity: sha512-b3d/lnqM6QVT6kYTQ0FYazY5w0XApG6S706Hi9gdr4/wcateebqdlYpNggnuS0MXIWM3ZlNMOEO7Veui989k4g==}
+    requiresBuild: true
+    peerDependencies:
+      '@vue/composition-api': ^1.7.1
+      vue: ^2.0.0 || >=3.0.0
+      vue-demi: ^0.14.6
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+    dependencies:
+      vue: 3.4.21(typescript@5.4.3)
+      vue-demi: 0.14.7(vue@3.4.21)
+    dev: false
+
   /@vue/babel-helper-vue-transform-on@1.2.2:
     resolution: {integrity: sha512-nOttamHUR3YzdEqdM/XXDyCSdxMA9VizUKoroLX6yTyRtggzQMHXcmwh8a7ZErcJttIBIc9s68a1B8GZ+Dmvsw==}
     dev: true
diff --git a/src/router/modules/able.ts b/src/router/modules/able.ts
index 1a61e19558..8bf18fe215 100644
--- a/src/router/modules/able.ts
+++ b/src/router/modules/able.ts
@@ -88,6 +88,22 @@ export default {
         }
       }
     },
+    {
+      path: "/able/word",
+      name: "Word",
+      component: () => import("@/views/able/word.vue"),
+      meta: {
+        title: $t("menus.hsWord")
+      }
+    },
+    {
+      path: "/able/excels",
+      name: "Excels",
+      component: () => import("@/views/able/excels.vue"),
+      meta: {
+        title: $t("menus.hsExcels")
+      }
+    },
     {
       path: "/able/pdf",
       name: "Pdf",
diff --git a/src/views/able/excels.vue b/src/views/able/excels.vue
new file mode 100644
index 0000000000..a369ef7085
--- /dev/null
+++ b/src/views/able/excels.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import "@vue-office/excel/lib/index.css";
+import VueOfficeExcel from "@vue-office/excel";
+
+defineOptions({
+  name: "Excels"
+});
+
+const excel = "https://xiaoxian521.github.io/hyperlink/other/excel.xlsx";
+
+function renderedHandler() {
+  console.log("渲染完成");
+}
+
+function errorHandler() {
+  console.log("渲染失败");
+}
+</script>
+
+<template>
+  <vue-office-excel
+    :src="excel"
+    style="height: 100vh"
+    @rendered="renderedHandler"
+    @error="errorHandler"
+  />
+</template>
diff --git a/src/views/able/word.vue b/src/views/able/word.vue
new file mode 100644
index 0000000000..8ce9676952
--- /dev/null
+++ b/src/views/able/word.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import "@vue-office/docx/lib/index.css";
+import VueOfficeDocx from "@vue-office/docx";
+
+defineOptions({
+  name: "Word"
+});
+
+const docx = "https://xiaoxian521.github.io/hyperlink/other/word.docx";
+
+function rendered() {
+  console.log("渲染完成");
+}
+</script>
+
+<template>
+  <vue-office-docx :src="docx" @rendered="rendered" />
+</template>