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

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>