@uxda/appkit 4.3.27 → 4.3.28

package/Appkit/347/273/204/344/273/266/344/275/277/347/224/250/350/247/204/345/210/231.md

@@ -43,6 +43,10 @@
 ### 业务场景 (Scenarios)
 - [SharePoster - 分享海报](#shareposter---分享海报)
 
+### 共享模块 (Shared)
+- [OfficePdf - PDF 预览](#officepdf---pdf-预览)
+- [OfficeDocx - Word 文档预览](#officedocx---word-文档预览)
+
 ### 通用基础组件 (Components)
 - [DdSearch - 搜索框](#ddsearch---搜索框)
 - [DdIcon - 图标组件](#ddicon---图标组件)
@@ -1501,6 +1505,64 @@ const handleShare = () => {
 
 ---
 
+# 共享模块组件使用规则
+
+## OfficePdf - PDF 预览
+
+**功能描述**: 基于 @vue-office/pdf 的 PDF 在线预览组件，用于在小程序/H5 中展示 PDF 文件。
+
+### 导入方式
+
+```typescript
+import { OfficePdf } from '@uxda/appkit'
+// 或
+import { OfficePdf } from '@uxda/appkit/shared'
+```
+
+### Props
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+|--------|------|------|--------|------|
+| `src` | `string` | ✅ | - | PDF 文件地址（URL） |
+
+### Events
+
+组件内部使用 @vue-office/pdf 的 `rendered`、`error`，如需对外暴露可在组件内通过 `defineEmits` 透传。
+
+### Slots
+
+无。
+
+---
+
+## OfficeDocx - Word 文档预览
+
+**功能描述**: 基于 @vue-office/docx 的 Word 文档在线预览组件，用于在小程序/H5 中展示 .docx 文件。
+
+### 导入方式
+
+```typescript
+import { OfficeDocx } from '@uxda/appkit'
+// 或
+import { OfficeDocx } from '@uxda/appkit/shared'
+```
+
+### Props
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+|--------|------|------|--------|------|
+| `src` | `string` | ✅ | - | Word 文档地址（URL） |
+
+### Events
+
+组件内部使用 @vue-office/docx 的 `rendered`、`error`，如需对外暴露可在组件内通过 `defineEmits` 透传。
+
+### Slots
+
+无。
+
+---
+
 # 通用基础组件使用规则
 
 ## DdSearch - 搜索框

package/dist/appkit.css

@@ -229,6 +229,15 @@
 .ocr-invoice.disabled .ns-icon {
   filter: brightness(1.5) grayscale(1);
 }
+.office-pdf {
+  height: 100%;
+}
+.office-pdf .vue-office-pdf-wrapper {
+  height: 100%;
+}
+.office-docx {
+  height: 100%;
+}
 .recharge-view {
   height: 100%;
   display: flex;

package/dist/assets/asset-DcH8Kg-2

@@ -0,0 +1 @@
+

package/dist/assets/index-DcH8Kg-2.css

@@ -0,0 +1 @@
+

package/dist/index.js

@@ -1,7 +1,7 @@
-import { GridItem, Grid, Popup, ActionSheet, Checkbox, Button, Dialog, DatePicker, Radio, RadioGroup, FormItem, Form, Ellipsis, Skeleton, Cell, Input, Step, Steps } from '@nutui/nutui-taro';
+import { Grid, GridItem, Popup, ActionSheet, Checkbox, Button, Dialog, DatePicker, Form, FormItem, RadioGroup, Radio, Ellipsis, Skeleton, Cell, Input, Steps, Step } from '@nutui/nutui-taro';
 import '@nutui/nutui-taro/dist/packages/button/style/css';
 import '@nutui/nutui-taro/dist/packages/checkbox/style/css';
-import { defineComponent, reactive, openBlock, createBlock, withCtx, createElementBlock, Fragment, renderList, normalizeClass, createElementVNode, toDisplayString, createTextVNode, ref, computed, onUnmounted, resolveDirective, createCommentVNode, withDirectives, renderSlot, createVNode, normalizeStyle, unref, isRef, onMounted, createStaticVNode, watch, vShow, mergeModels, useModel, resolveComponent, vModelText, watchPostEffect, withModifiers } from 'vue';
+import { defineComponent, reactive, createBlock, openBlock, withCtx, createElementBlock, Fragment, renderList, normalizeClass, createElementVNode, toDisplayString, createTextVNode, ref, computed, onUnmounted, resolveDirective, createCommentVNode, withDirectives, renderSlot, createVNode, normalizeStyle, unref, isRef, onMounted, createStaticVNode, watch, vShow, mergeModels, useModel, resolveComponent, vModelText, watchPostEffect, withModifiers } from 'vue';
 import '@nutui/nutui-taro/dist/packages/grid/style/css';
 import '@nutui/nutui-taro/dist/packages/griditem/style/css';
 import Taro, { showModal, getSystemInfoSync, getMenuButtonBoundingClientRect, request as request$1, uploadFile, showToast, chooseMedia, chooseMessageFile, showLoading, hideLoading, getStorageSync, setStorageSync, getSystemInfo, getNetworkType, getEnv, getAccountInfoSync, getPerformance, onAppHide, useDidShow, onAppShow, onNetworkStatusChange, useRouter } from '@tarojs/taro';
@@ -11,6 +11,9 @@ import isIdentityCard from 'validator/es/lib/isIdentityCard';
 import qs from 'qs';
 import { NsForm, NsInput, NsButton, useNutshell, NsIcon, usePopup, NsButtonGroup, usePaging, NsPage, NsTabs, NsPageContent, NsSkeleton, NsRepeator, NsCard, NsEmpty, NsCheckbox } from '@uxda/nutshell/taro';
 import '@nutui/nutui-taro/dist/packages/actionsheet/style/css';
+import VueOfficePdf from '@vue-office/pdf';
+import VueOfficeDocx from '@vue-office/docx';
+import '@vue-office/docx/lib/index.css';
 import pako from 'pako';
 import dsBridge from 'dsbridge';
 import { debounce as debounce$1 } from 'lodash-es';
@@ -32,9 +35,9 @@ import '@nutui/nutui-taro/dist/packages/skeleton/style/css';
 import '@nutui/nutui-taro/dist/packages/steps/style/css';
 import '@nutui/nutui-taro/dist/packages/step/style/css';
 
-const _hoisted_1$G = { class: "token-line number" };
+const _hoisted_1$I = { class: "token-line number" };
 const _hoisted_2$t = { class: "number" };
-var script$O = /* @__PURE__ */ defineComponent({
+var script$Q = /* @__PURE__ */ defineComponent({
   __name: "AmountPicker",
   props: {
     items: { type: Array, required: true, default: () => [] },
@@ -72,7 +75,7 @@ var script$O = /* @__PURE__ */ defineComponent({
                 default: withCtx(() => [
                   createElementVNode(
                     "h4",
-                    _hoisted_1$G,
+                    _hoisted_1$I,
                     toDisplayString(amount.token),
                     1
                     /* TEXT */
@@ -107,7 +110,7 @@ var script$O = /* @__PURE__ */ defineComponent({
   }
 });
 
-script$O.__file = "src/payment/components/AmountPicker.vue";
+script$Q.__file = "src/payment/components/AmountPicker.vue";
 
 const getSdkConfig = (appCode, url) => {
   return new Promise((resolve, reject) => {
@@ -634,11 +637,11 @@ const useUpload = (config) => {
   };
 };
 
-const _hoisted_1$F = {
+const _hoisted_1$H = {
   key: 0,
   class: "page-title"
 };
-var script$N = /* @__PURE__ */ defineComponent({
+var script$P = /* @__PURE__ */ defineComponent({
   __name: "PageHeader",
   props: {
     title: { type: String, required: false, default: "" },
@@ -669,7 +672,7 @@ var script$N = /* @__PURE__ */ defineComponent({
         [
           __props.title ? (openBlock(), createElementBlock(
             "h1",
-            _hoisted_1$F,
+            _hoisted_1$H,
             toDisplayString(__props.title),
             1
             /* TEXT */
@@ -695,10 +698,10 @@ var script$N = /* @__PURE__ */ defineComponent({
   }
 });
 
-script$N.__file = "src/shared/components/PageHeader.vue";
+script$P.__file = "src/shared/components/PageHeader.vue";
 
-const _hoisted_1$E = { class: "drawer-body" };
-var script$M = /* @__PURE__ */ defineComponent({
+const _hoisted_1$G = { class: "drawer-body" };
+var script$O = /* @__PURE__ */ defineComponent({
   __name: "AppDrawer",
   props: {
     modelValue: { type: Boolean, required: true },
@@ -722,12 +725,12 @@ var script$M = /* @__PURE__ */ defineComponent({
         "onUpdate:visible": onVisibleChange
       }, {
         default: withCtx(() => [
-          createVNode(script$N, {
+          createVNode(script$P, {
             title: __props.title,
             style: normalizeStyle(unref(Taro).getEnv() !== "WEB" ? "" : "--height: 40px"),
             onClose: onPageHeaderClose
           }, null, 8, ["title", "style"]),
-          createElementVNode("div", _hoisted_1$E, [
+          createElementVNode("div", _hoisted_1$G, [
             renderSlot(_ctx.$slots, "default")
           ])
         ]),
@@ -738,9 +741,9 @@ var script$M = /* @__PURE__ */ defineComponent({
   }
 });
 
-script$M.__file = "src/shared/components/AppDrawer.vue";
+script$O.__file = "src/shared/components/AppDrawer.vue";
 
-const _hoisted_1$D = { class: "app-verify column" };
+const _hoisted_1$F = { class: "app-verify column" };
 const _hoisted_2$s = { class: "caption" };
 const _hoisted_3$m = { class: "number" };
 const _hoisted_4$i = { class: "form-btn" };
@@ -749,7 +752,7 @@ const _hoisted_5$e = {
   class: "caption"
 };
 const _hoisted_6$a = { class: "row buttons" };
-var script$L = /* @__PURE__ */ defineComponent({
+var script$N = /* @__PURE__ */ defineComponent({
   __name: "AppVerify",
   props: {
     phone: { type: String, required: true },
@@ -782,7 +785,7 @@ var script$L = /* @__PURE__ */ defineComponent({
     const props = __props;
     return (_ctx, _cache) => {
       const _directive_track_click = resolveDirective("track-click");
-      return openBlock(), createElementBlock("div", _hoisted_1$D, [
+      return openBlock(), createElementBlock("div", _hoisted_1$F, [
         createElementVNode(
           "h2",
           null,
@@ -894,10 +897,10 @@ var script$L = /* @__PURE__ */ defineComponent({
   }
 });
 
-script$L.__file = "src/shared/components/AppVerify.vue";
+script$N.__file = "src/shared/components/AppVerify.vue";
 
-const _hoisted_1$C = { key: 0 };
-var script$K = /* @__PURE__ */ defineComponent({
+const _hoisted_1$E = { key: 0 };
+var script$M = /* @__PURE__ */ defineComponent({
   __name: "index",
   props: {
     text: { type: String, required: false },
@@ -929,7 +932,7 @@ var script$K = /* @__PURE__ */ defineComponent({
           }, [
             __props.text ? (openBlock(), createElementBlock(
               "span",
-              _hoisted_1$C,
+              _hoisted_1$E,
               toDisplayString(__props.text),
               1
               /* TEXT */
@@ -964,7 +967,7 @@ var script$K = /* @__PURE__ */ defineComponent({
   }
 });
 
-script$K.__file = "src/components/dd-notice-bar/index.vue";
+script$M.__file = "src/components/dd-notice-bar/index.vue";
 
 const typeMappings = {
   CZ: "\u5145\u503C",
@@ -1169,7 +1172,7 @@ function useHttp$3() {
   return $http;
 }
 
-var script$J = /* @__PURE__ */ defineComponent({
+var script$L = /* @__PURE__ */ defineComponent({
   __name: "DeviceVersion",
   props: {
     versions: { type: String, required: false, default: "{}" }
@@ -1216,7 +1219,7 @@ var script$J = /* @__PURE__ */ defineComponent({
       }
     });
     return (_ctx, _cache) => {
-      return showAlert.value ? (openBlock(), createBlock(script$K, {
+      return showAlert.value ? (openBlock(), createBlock(script$M, {
         key: 0,
         showClose: "",
         style: normalizeStyle(topStype.value),
@@ -1227,9 +1230,9 @@ var script$J = /* @__PURE__ */ defineComponent({
   }
 });
 
-script$J.__file = "src/shared/components/DeviceVersion.vue";
+script$L.__file = "src/shared/components/DeviceVersion.vue";
 
-var script$I = /* @__PURE__ */ defineComponent({
+var script$K = /* @__PURE__ */ defineComponent({
   __name: "OcrIcon",
   props: {
     disabled: { type: Boolean, required: false, default: false },
@@ -1442,9 +1445,9 @@ var script$I = /* @__PURE__ */ defineComponent({
   }
 });
 
-script$I.__file = "src/shared/components/OcrIcon.vue";
+script$K.__file = "src/shared/components/OcrIcon.vue";
 
-var script$H = /* @__PURE__ */ defineComponent({
+var script$J = /* @__PURE__ */ defineComponent({
   __name: "OcrBank",
   props: {
     disabled: { type: Boolean, required: false, default: false },
@@ -1609,9 +1612,9 @@ var script$H = /* @__PURE__ */ defineComponent({
   }
 });
 
-script$H.__file = "src/shared/components/OcrBank.vue";
+script$J.__file = "src/shared/components/OcrBank.vue";
 
-var script$G = /* @__PURE__ */ defineComponent({
+var script$I = /* @__PURE__ */ defineComponent({
   __name: "OcrBusinessLicense",
   props: {
     disabled: { type: Boolean, required: true, default: false },
@@ -1706,9 +1709,9 @@ var script$G = /* @__PURE__ */ defineComponent({
   }
 });
 
-script$G.__file = "src/shared/components/OcrBusinessLicense.vue";
+script$I.__file = "src/shared/components/OcrBusinessLicense.vue";
 
-var script$F = /* @__PURE__ */ defineComponent({
+var script$H = /* @__PURE__ */ defineComponent({
   __name: "OcrInvoice",
   props: {
     disabled: { type: Boolean, required: false, default: false },
@@ -1964,7 +1967,63 @@ var script$F = /* @__PURE__ */ defineComponent({
   }
 });
 
-script$F.__file = "src/shared/components/OcrInvoice.vue";
+script$H.__file = "src/shared/components/OcrInvoice.vue";
+
+const _hoisted_1$D = { class: "office-pdf" };
+var script$G = /* @__PURE__ */ defineComponent({
+  __name: "OfficePdf",
+  props: {
+    src: { type: String, required: true }
+  },
+  setup(__props) {
+    function onRendered() {
+      console.log("rendered");
+    }
+    function onError(error) {
+      console.log("error", error);
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$D, [
+        createVNode(unref(VueOfficePdf), {
+          style: { "height": "100%" },
+          src: __props.src,
+          onRendered,
+          onError
+        }, null, 8, ["src"])
+      ]);
+    };
+  }
+});
+
+script$G.__file = "src/shared/components/OfficePdf.vue";
+
+const _hoisted_1$C = { class: "office-docx" };
+var script$F = /* @__PURE__ */ defineComponent({
+  __name: "OfficeDocx",
+  props: {
+    src: { type: String, required: true }
+  },
+  setup(__props) {
+    function onRendered() {
+      console.log("rendered");
+    }
+    function onError(error) {
+      console.log("error", error);
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$C, [
+        createVNode(unref(VueOfficeDocx), {
+          style: { "height": "100%" },
+          src: __props.src,
+          onRendered,
+          onError
+        }, null, 8, ["src"])
+      ]);
+    };
+  }
+});
+
+script$F.__file = "src/shared/components/OfficeDocx.vue";
 
 var HttpMethod = /* @__PURE__ */ ((HttpMethod2) => {
   HttpMethod2["get"] = "GET";
@@ -2071,6 +2130,15 @@ function isApp() {
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+var TrackingEventType = /* @__PURE__ */ ((TrackingEventType2) => {
+  TrackingEventType2["PAGE_VIEW"] = "page_view";
+  TrackingEventType2["PAGE_LEAVE"] = "page_leave";
+  TrackingEventType2["APP_DEVICE_INFO"] = "app_device_info";
+  TrackingEventType2["CLICK"] = "click";
+  TrackingEventType2["CUSTOM"] = "custom";
+  return TrackingEventType2;
+})(TrackingEventType || {});
+const { PAGE_VIEW, PAGE_LEAVE, CLICK, CUSTOM, APP_DEVICE_INFO } = TrackingEventType;
 const DEFAULT_CONFIG = {
   enabled: true,
   debug: false,
@@ -3606,7 +3674,7 @@ var script$E = /* @__PURE__ */ defineComponent({
       const _directive_track_click = resolveDirective("track-click");
       return openBlock(), createElementBlock("view", _hoisted_1$B, [
         createElementVNode("view", _hoisted_2$r, [
-          createVNode(script$O, {
+          createVNode(script$Q, {
             items: amounts.value,
             selected: state.selected,
             onChange: onAmountSelect
@@ -4328,7 +4396,7 @@ var script$A = /* @__PURE__ */ defineComponent({
 script$A.__file = "src/payment/components/TradeView.vue";
 
 const components = {
-  AmountPicker: script$O,
+  AmountPicker: script$Q,
   RechargeView: script$E,
   UserAgreement: script$D,
   RechargeResult: script$C,
@@ -5146,7 +5214,7 @@ var script$t = /* @__PURE__ */ defineComponent({
         [
           createElementVNode("div", _hoisted_1$q, [
             createElementVNode("div", _hoisted_2$k, [
-              createVNode(unref(script$N), {
+              createVNode(unref(script$P), {
                 title: unref(Taro).getEnv() !== "WEB" ? "\u6211\u7684\u8D26\u6237" : "",
                 class: normalizeClass({ "with-background": scrolled.value > 0 }),
                 onClose: onPageHeaderClose
@@ -5451,7 +5519,7 @@ var script$t = /* @__PURE__ */ defineComponent({
             _: 1
             /* STABLE */
           }, 8, ["visible"]),
-          createVNode(unref(script$M), {
+          createVNode(unref(script$O), {
             modelValue: secondBalanceOpen.value,
             "onUpdate:modelValue": _cache[6] || (_cache[6] = ($event) => secondBalanceOpen.value = $event),
             title: "\u6536\u652F\u660E\u7EC6"
@@ -6821,7 +6889,7 @@ var script$k = /* @__PURE__ */ defineComponent({
                     ), [
                       [vModelText, formState.name]
                     ]),
-                    createVNode(script$I, {
+                    createVNode(script$K, {
                       "has-upload-vo": false,
                       onComplete: onOCRInfo
                     }, {
@@ -7270,7 +7338,7 @@ var script$i = /* @__PURE__ */ defineComponent({
   emits: ["detail", "close", "view", "popup", "hasBanner"],
   setup(__props, { emit: __emit }) {
     const props = __props;
-    const { toReadFun, noticeClick } = useNotice();
+    const { noticeClick } = useNotice();
     const bannerMessages = ref([]);
     const popMessages = ref([]);
     const activeKey = ref(0);
@@ -7395,7 +7463,7 @@ var script$i = /* @__PURE__ */ defineComponent({
                 Fragment,
                 null,
                 renderList(bannerMessages.value, (item, key) => {
-                  return withDirectives((openBlock(), createBlock(script$K, {
+                  return withDirectives((openBlock(), createBlock(script$M, {
                     class: normalizeClass({ show: key === activeKey.value }),
                     key,
                     showClose: item.noticeType === 0,
@@ -11395,7 +11463,7 @@ var script$2 = /* @__PURE__ */ defineComponent({
                         rules: ["required"]
                       }, {
                         append: withCtx(() => [
-                          !\u5DF2\u8BA4\u8BC1.value ? (openBlock(), createBlock(unref(script$I), {
+                          !\u5DF2\u8BA4\u8BC1.value ? (openBlock(), createBlock(unref(script$K), {
                             key: 0,
                             "has-upload-vo": false,
                             onComplete: onOcrComplete
@@ -12006,4 +12074,4 @@ const AppKit = {
   }
 };
 
-export { script$t as AccountView, script$O as AmountPicker, script$M as AppDrawer, script$L as AppVerify, script$z as BalanceCard, script$s as BalanceReminder, script$r as DateRange, script$J as DeviceVersion, script$p as ListFilter, script$4 as LoginSetting, script$i as NoticeBanner, script$h as NoticeEntry, script$f as NoticeList, script$e as NoticeList2, script$H as OcrBank, script$G as OcrBusinessLicense, script$I as OcrIcon, script$F as OcrInvoice, script$N as PageHeader, script$o as PromoterCard, script$C as RechargeResult, script$E as RechargeView, script$k as SelfRegistration, script as SharePoster, script$A as TradeView, script$D as UserAgreement, script$2 as UserAuth, script$a as UserBinding, script$9 as UserBindingSuccess, script$d as UserEntry, script$6 as UserFeedback, script$5 as UserFeedbackEntry, script$7 as UserHeadCrop, script$b as UserInfo, script$3 as UserResourceEmpty, components, compressImage, compressImageWithCanvas, createHttp, AppKit as default, defaultCryptoConfig, generateUniqueId, getCompressQuality, getSdkConfig, initTracking, installTrackingPlugin, jssdkServices, requestPayment$2 as requestPayment, requestWxH5Pay, services$1 as services, trackingSDK, useAppKit, useCountdown, useCrypto, useEncode, useLogger, usePageTracking, useSafeArea, useTabbar, useUpload, useValidator, useWxAuth };
+export { script$t as AccountView, script$Q as AmountPicker, script$O as AppDrawer, script$N as AppVerify, script$z as BalanceCard, script$s as BalanceReminder, script$r as DateRange, script$L as DeviceVersion, script$p as ListFilter, script$4 as LoginSetting, script$i as NoticeBanner, script$h as NoticeEntry, script$f as NoticeList, script$e as NoticeList2, script$J as OcrBank, script$I as OcrBusinessLicense, script$K as OcrIcon, script$H as OcrInvoice, script$F as OfficeDocx, script$G as OfficePdf, script$P as PageHeader, script$o as PromoterCard, script$C as RechargeResult, script$E as RechargeView, script$k as SelfRegistration, script as SharePoster, script$A as TradeView, script$D as UserAgreement, script$2 as UserAuth, script$a as UserBinding, script$9 as UserBindingSuccess, script$d as UserEntry, script$6 as UserFeedback, script$5 as UserFeedbackEntry, script$7 as UserHeadCrop, script$b as UserInfo, script$3 as UserResourceEmpty, components, compressImage, compressImageWithCanvas, createHttp, AppKit as default, defaultCryptoConfig, generateUniqueId, getCompressQuality, getSdkConfig, initTracking, installTrackingPlugin, jssdkServices, requestPayment$2 as requestPayment, requestWxH5Pay, services$1 as services, trackingSDK, useAppKit, useCountdown, useCrypto, useEncode, useLogger, usePageTracking, useSafeArea, useTabbar, useUpload, useValidator, useWxAuth };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxda/appkit",
-  "version": "4.3.27",
+  "version": "4.3.28",
   "description": "小程序应用开发包",
   "main": "dist/index.js",
   "module": "dist/index.ts",
@@ -35,12 +35,15 @@
     "@tarojs/taro": "^4.1.7",
     "@types/wechat-miniprogram": "^3.4.7",
     "@uxda/nutshell": "^1.6.98",
+    "@vue-office/docx": "^1.6.3",
+    "@vue-office/pdf": "^2.0.10",
     "dayjs": "^1.11.18",
     "dsbridge": "^3.1.4",
     "lodash-es": "^4.17.21",
     "pako": "^2.1.0",
     "validator": "^13.15.15",
-    "vue": "^3.5.22"
+    "vue": "^3.5.22",
+    "vue-demi": "^0.14.10"
   },
   "devDependencies": {
     "@babel/core": "^7.28.4",

package/rollup.config.mjs

@@ -61,6 +61,9 @@ export default [
       'dayjs',
       'validator',
       'dsbridge',
+      '@vue-office/docx',
+      '@vue-office/pdf',
+      'vue-demi'
     ],
   },
   // {

package/src/shared/components/OfficeDocx.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="office-docx">
+    <vue-office-docx
+      style="height: 100%"
+      :src="src"
+      @rendered="onRendered"
+      @error="onError"
+    />    
+  </div>
+</template>
+
+<script lang="ts" setup>
+import VueOfficeDocx from '@vue-office/docx'
+import '@vue-office/docx/lib/index.css'
+
+const props = defineProps<{
+  src: string
+}>()
+
+function onRendered() {
+  console.log('rendered')
+}
+
+function onError(error: any) {
+  console.log('error', error)
+}
+</script>
+
+<style lang="scss">
+.office-docx {
+  height: 100%;
+}
+</style>

package/src/shared/components/OfficePdf.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="office-pdf">
+    <vue-office-pdf
+      style="height: 100%"
+      :src="src"
+      @rendered="onRendered"
+      @error="onError"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import VueOfficePdf from '@vue-office/pdf'
+
+const props = defineProps<{
+  src: string
+}>()
+
+function onRendered() {
+  console.log('rendered')
+}
+
+function onError(error: any) {
+  console.log('error', error)
+}
+</script>
+
+<style lang="scss">
+.office-pdf {
+  height: 100%;
+  .vue-office-pdf-wrapper {
+    height: 100%;
+  }
+}
+</style>

package/src/shared/components/index.ts

@@ -6,5 +6,7 @@ import OcrIcon from './OcrIcon.vue'
 import OcrBank from './OcrBank.vue'
 import OcrBusinessLicense from './OcrBusinessLicense.vue'
 import OcrInvoice from './OcrInvoice.vue'
+import OfficePdf from './OfficePdf.vue'
+import OfficeDocx from './OfficeDocx.vue'
 
-export { AppDrawer, PageHeader, DeviceVersion, AppVerify, OcrIcon, OcrBank,OcrBusinessLicense, OcrInvoice }
+export { AppDrawer, PageHeader, DeviceVersion, AppVerify, OcrIcon, OcrBank,OcrBusinessLicense, OcrInvoice, OfficePdf, OfficeDocx }