fix: 打印事件不需要 toValue 取值

fixed #16
siaikin · Nov 20, 2024 · ce150f6 · ce150f6
1 parent 82edce3
commit ce150f6
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 16 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "vue-to-print",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "A Vue 3 component to print the content of an element or a component.",
   "scripts": {
     "dev": "vite",

diff --git a/src/components/vue-to-print/VueToPrint.vue b/src/components/vue-to-print/VueToPrint.vue
@@ -7,7 +7,14 @@ export default defineComponent({
   name: "VueToPrint",
   props: vueToPrintProps(),
   setup(props, { slots, expose }) {
-    const { handlePrint } = useVueToPrint(toRefs(props));
+    const { handlePrint } = useVueToPrint({
+      ...toRefs(props),
+      onAfterPrint: props.onAfterPrint,
+      onBeforePrint: props.onBeforePrint,
+      onBeforeGetContent: props.onBeforeGetContent,
+      onPrintError: props.onPrintError,
+      print: props.print,
+    });
 
     expose({ handlePrint });
     return () => {

diff --git a/src/components/vue-to-print/types.ts b/src/components/vue-to-print/types.ts
@@ -135,12 +135,12 @@ export interface UseVueToPrintProps {
   copyStyles: MaybeRefOrGetter<boolean>;
   documentTitle: MaybeRefOrGetter<string>;
   fonts: MaybeRefOrGetter<Font[]>;
-  onAfterPrint: MaybeRefOrGetter<() => void>;
-  onBeforeGetContent: MaybeRefOrGetter<() => void | Promise<void>>;
-  onBeforePrint: MaybeRefOrGetter<() => void | Promise<void>>;
-  onPrintError: MaybeRefOrGetter<(errorLocation: "onBeforeGetContent" | "onBeforePrint" | "print", error: Error) => void>;
+  onAfterPrint: () => void;
+  onBeforeGetContent: () => void | Promise<void>;
+  onBeforePrint: () => void | Promise<void>;
+  onPrintError: (errorLocation: "onBeforeGetContent" | "onBeforePrint" | "print", error: Error) => void;
   pageStyle: MaybeRefOrGetter<string | PropertyFunction<string>>;
-  print: MaybeRefOrGetter<(target: HTMLIFrameElement) => Promise<void>>;
+  print: (target: HTMLIFrameElement) => void | Promise<void>;
   removeAfterPrint: MaybeRefOrGetter<boolean>;
   suppressErrors: MaybeRefOrGetter<boolean>;
   nonce: MaybeRefOrGetter<string>;

diff --git a/src/components/vue-to-print/use-vue-to-print.ts b/src/components/vue-to-print/use-vue-to-print.ts
@@ -1,7 +1,7 @@
 import { type Font, type PublicUseVueToPrintProps } from "./types";
 import * as ShadowDomSupport from "./supports/shadow-dom";
 import { deepCloneNode } from "./clone-node";
-import { toValue } from "vue";
+import { isRef, toValue } from "vue";
 
 /**
  * The default props in Vue are set within vueToPrintProps too.
@@ -35,9 +35,9 @@ export function useVueToPrint(props: PublicUseVueToPrintProps) {
   let resourcesErrored: (Element | Font | FontFace)[] = [];
 
   const startPrint = (target: HTMLIFrameElement) => {
-    const onAfterPrint = toValue(props.onAfterPrint);
-    const onPrintError = toValue(props.onPrintError);
-    const print = toValue(props.print);
+    const onAfterPrint = props.onAfterPrint;
+    const onPrintError = props.onPrintError;
+    const print = props.print;
     const documentTitle = toValue(props.documentTitle);
 
     // Some browsers such as Safari don't always behave well without this timeout
@@ -46,7 +46,7 @@ export function useVueToPrint(props: PublicUseVueToPrintProps) {
         target.contentWindow.focus(); // Needed for IE 11
 
         if (print) {
-          print(target)
+          Promise.resolve(print(target))
             .then(() => onAfterPrint?.())
             .then(() => handleRemoveIframe())
             .catch((error: Error) => {
@@ -105,8 +105,8 @@ export function useVueToPrint(props: PublicUseVueToPrintProps) {
   };
 
   const triggerPrint = (target: HTMLIFrameElement) => {
-    const onBeforePrint = toValue(props.onBeforePrint);
-    const onPrintError = toValue(props.onPrintError);
+    const onBeforePrint = props.onBeforePrint;
+    const onPrintError = props.onPrintError;
 
     if (onBeforePrint) {
       const onBeforePrintOutput = onBeforePrint();
@@ -129,8 +129,8 @@ export function useVueToPrint(props: PublicUseVueToPrintProps) {
   };
 
   const handleClick = () => {
-    const onBeforeGetContent = toValue(props.onBeforeGetContent);
-    const onPrintError = toValue(props.onPrintError);
+    const onBeforeGetContent = props.onBeforeGetContent;
+    const onPrintError = props.onPrintError;
 
     if (onBeforeGetContent) {
       const onBeforeGetContentOutput = onBeforeGetContent();