feat: 添加Word、Excel预览示例

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",

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

locales/zh-CN.yaml

@@ -126,6 +126,8 @@ menus:
   hsSwiper: Swiper插件
   hsVirtualList: 虚拟列表
   hsPdf: PDF预览
+  hsWord: Word预览
+  hsExcels: Excel预览
   hsExcel: 导出Excel
   hsInfiniteScroll: 表格无限滚动
   hsSensitive: 敏感词过滤

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",

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

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",

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>

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>