version: v4.4.6

CHANGELOG.md

@@ -1,5 +1,32 @@
 # CHANGE LOG
 
+## 4.4.6
+
+## Feats
+
+- `vite` 配置项
+  - `cdn`
+    - 移除不能被 `cdn` 引入的包配置
+- 移除 `vue-demi` 本地包依赖，仅在 `cdn` 引入。因为某些插件依赖改包
+
+## Fixes
+
+- `hooks` 相关
+  - `UseDomToImageOptions` 方法
+    - 修复 `options.imageType` 必填的错误
+    - 修复该方法在执行失败时，没有正确的返回错误状态与执行错误钩子方法。现在在执行失败或者获取未正确获取到元素的时候，会返回 `Promise.reject` 状态，并且会执行 `createdError` 钩子方法
+    - 修改 `createdError` 钩子方法回调参数类型
+    - 修改 `created` 钩子方法回调参数类型
+    - 修复 `finally` 方法不能正确执行的问题
+- `utils` 相关
+  - `printDom` 方法
+    - 新增配置项 `base64` 为 `true`
+    - 修改 `printOptions` 类型，剔除 `base64` 属性，因为该配置项始终应该为 `true`，即使你手动配置为 `false`，也会被强制转换为 `true`
+- `components` 相关
+  - `RTable`
+    - 修复打印的时候，可能会出现颜色不正确的问题
+    - 现在打印的时候，会将整个表格（包括：表头、表格、表格分页、表格底部区域）全部打印
+
 ## 4.4.5
 
 ## Feats

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ray-template",
   "private": false,
-  "version": "4.4.5",
+  "version": "4.4.6",
   "type": "module",
   "engines": {
     "node": "^18.0.0 || >=20.0.0",
@@ -49,7 +49,6 @@
     "pinia-plugin-persistedstate": "^3.2.0",
     "print-js": "^1.6.0",
     "vue": "^3.3.11",
-    "vue-demi": "0.14.6",
     "vue-hooks-plus": "1.8.5",
     "vue-i18n": "^9.8.0",
     "vue-router": "^4.2.5",

pnpm-lock.yaml

@@ -56,9 +56,6 @@ dependencies:
   vue:
     specifier: ^3.3.11
     version: 3.3.11(typescript@5.2.2)
-  vue-demi:
-    specifier: 0.14.6
-    version: 0.14.6(vue@3.3.11)
   vue-hooks-plus:
     specifier: 1.8.5
     version: 1.8.5(vue@3.3.11)

src/components/RTable/src/Table.tsx

@@ -175,7 +175,6 @@ export default defineComponent({
       uuidTable,
       uuidWrapper,
       wrapperRef,
-      tableRef: rTableInst,
     })
     expose({
       rTableInst,

src/components/RTable/src/components/Print.tsx

@@ -22,7 +22,7 @@ export default defineComponent({
   name: 'TablePrint',
   props,
   setup(props) {
-    const { tableRef } = inject<TableProvider>(
+    const { wrapperRef } = inject<TableProvider>(
       config.tableKey,
       {} as TableProvider,
     )
@@ -41,7 +41,7 @@ export default defineComponent({
         printOptions.documentTitle = typeof title === 'string' ? title : ''
       }
 
-      printDom(tableRef, {
+      printDom(wrapperRef, {
         printOptions,
         domToImageOptions,
       })

src/hooks/web/useDomToImage.ts

@@ -17,6 +17,8 @@ import type { BasicTarget, TargetType } from '@/types/modules/vue'
 
 export type ImageType = keyof typeof domToImageMethods
 
+export type DomToImageResult = string | Blob | Uint8ClampedArray | undefined
+
 export interface UseDomToImageOptions extends ReDomToImageOptions {
   /**
    *
@@ -25,7 +27,7 @@ export interface UseDomToImageOptions extends ReDomToImageOptions {
    *
    * @default jpeg
    */
-  imageType: ImageType
+  imageType?: ImageType
   /**
    *
    *
@@ -44,27 +46,23 @@ export interface UseDomToImageOptions extends ReDomToImageOptions {
    * 在 dom 转换为图片之后执行
    */
   created?: <T extends TargetType = Element>(
+    result: DomToImageResult,
     element: T,
-    result: string | Blob | Uint8ClampedArray | undefined,
   ) => void
   /**
    *
-   * @param element current dom
    * @param error dom to image error
    *
    * 在 dom 转换为图片失败时执行
    */
-  createdError?: <T extends TargetType = Element>(
-    element: T,
-    error: Error,
-  ) => void
+  createdError?: (error?: Error) => void
   /**
    *
    * @param element current dom
    *
    * 无论 dom 转换为图片成功或失败，都会执行
    */
-  finally?: <T extends TargetType = Element>(element: T) => void
+  finally?: () => void
 }
 
 const domToImageMethods = {
@@ -99,29 +97,45 @@ export const useDomToImage = <T extends HTMLElement>(
   target: BasicTarget<T>,
   options?: UseDomToImageOptions,
 ) => {
-  const { beforeCreate, created, createdError } = options ?? {}
+  const {
+    beforeCreate,
+    created,
+    createdError,
+    finally: _finally,
+  } = options ?? {}
 
-  const run = (imageType: UseDomToImageOptions['imageType'] = 'jpeg') => {
-    const element = unrefElement(target)
+  const run = (
+    imageType: UseDomToImageOptions['imageType'] = 'jpeg',
+  ): Promise<DomToImageResult> => {
+    return new Promise((resolve, reject) => {
+      const element = unrefElement(target)
 
-    beforeCreate?.(element)
+      beforeCreate?.(element)
+
+      if (!element) {
+        createdError?.()
+
+        return reject('useDomToImage: element is undefined.')
+      }
 
-    if (element) {
       const type = imageType ?? options?.imageType
       const matchFc = domToImageMethods[type] || domToImageMethods['jpeg']
 
-      return matchFc(element, options)
+      matchFc(element, options)
         .then((res) => {
-          created?.(element, res)
+          created?.(res, element)
 
-          return Promise.resolve(res)
+          return resolve(res)
         })
-        .catch((error) => {
-          createdError?.(element, error as Error)
+        .catch((error: Error) => {
+          createdError?.(error)
 
-          return Promise.reject(error as Error)
+          return reject(error)
         })
-    }
+        .finally(() => {
+          _finally?.()
+        })
+    })
   }
 
   return {

src/hooks/web/usePrint.ts

@@ -27,7 +27,7 @@ export type UsePrintTarget<T = any> =
  * const { print } = usePrint(refDom, {})
  * @example
  * const { print } = usePrint('#id', {})
- * const { print } = usePrint('base64', {})
+ * const { print } = usePrint('base64', {}) // 设置为 base64 时，一定要设置配置项 base64 为 true
  * const { print } = usePrint('https://xxx.com/xxx.png', {})
  * const { print } = usePrint(new Blob(), {})
  */

src/utils/dom.ts

@@ -16,7 +16,7 @@ import type { UsePrintOptions, UseDomToImageOptions } from '@/hooks/web'
 import type { BasicTarget } from '@/types/modules/vue'
 
 export interface PrintDomOptions {
-  printOptions?: Omit<UsePrintOptions, 'printable' | 'type'>
+  printOptions?: Omit<UsePrintOptions, 'printable' | 'type' | 'base64'>
   domToImageOptions?: Omit<UseDomToImageOptions, 'imageType'>
 }
 
@@ -28,7 +28,7 @@ export interface PrintDomOptions {
  * 基于 useDomToImage 和 print-js 封装，允许 Ref 注册 Dom 直接调用打印
  * 避免直接打印 dom 时出现一些诡异的问题
  *
- * 该方法会强制剔除 printOptions 中的 printable 和 type 属性，即使忽略了 ts 的类型检查
+ * 该方法会强制剔除 printOptions 中的 printable, type, base64 属性，即使忽略了 ts 的类型检查
  * 并且在绘制图片的时候，强制使用 jpeg 格式，即使是指定了其他格式
  *
  * 支持 useDomToImage 方法的所有配置项，除了 imageType
@@ -59,7 +59,9 @@ export const printDom = <T extends HTMLElement>(
     ?.then((res) => {
       const { print } = usePrint(res, {
         type: 'image',
-        ...omit(printOptions as UsePrintOptions, ['type']),
+        base64: true,
+        targetStyles: ['*'],
+        ...omit(printOptions as UsePrintOptions, ['type', 'base64']),
       })
 
       print()

src/views/demo/table/index.tsx

@@ -199,7 +199,6 @@ const TableView = defineComponent({
           }}
         </RCollapseGrid>
         <RTable
-          style="margin-top: 18px"
           scrollX={2000}
           title={
             <NSpace align="center">

vite.plugin.config.ts

@@ -86,11 +86,6 @@ function onlyBuildOptions(mode: string) {
           resolve:
             'https://cdn.staticfile.org/vue-i18n/9.8.0/vue-i18n.global.min.js',
         },
-        {
-          name: 'dayjs',
-          global: 'dayjs',
-          resolve: 'https://cdn.staticfile.org/dayjs/1.11.10/dayjs.min.js',
-        },
         {
           name: 'echarts',
           global: 'echarts',
@@ -106,28 +101,6 @@ function onlyBuildOptions(mode: string) {
           global: 'axios',
           resolve: 'https://cdn.staticfile.org/axios/1.6.2/axios.min.js',
         },
-        {
-          name: 'print-js',
-          global: 'printJS',
-          resolve: 'https://cdn.staticfile.org/print-js/1.6.0/print.min.js',
-        },
-        {
-          name: 'dom-to-image',
-          global: 'domtoimage',
-          resolve:
-            'https://cdn.staticfile.org/dom-to-image/2.6.0/dom-to-image.min.js',
-        },
-        {
-          name: 'clipboard',
-          global: 'ClipboardJS',
-          resolve:
-            'https://cdn.staticfile.org/clipboard.js/2.0.11/clipboard.min.js',
-        },
-        {
-          name: 'lodash-es',
-          global: '_',
-          resolve: 'https://cdn.staticfile.org/lodash.js/4.17.21/lodash.min.js',
-        },
       ],
     }),
   ]