From 45be1911120b199cf963362e267048a941015a46 Mon Sep 17 00:00:00 2001 From: XiaoDaiGua-Ray <443547225@qq.com> Date: Fri, 15 Dec 2023 22:26:36 +0800 Subject: [PATCH] version: v4.4.6 --- CHANGELOG.md | 27 ++++++++++ package.json | 3 +- pnpm-lock.yaml | 3 -- src/components/RTable/src/Table.tsx | 1 - .../RTable/src/components/Print.tsx | 4 +- src/hooks/web/useDomToImage.ts | 54 ++++++++++++------- src/hooks/web/usePrint.ts | 2 +- src/utils/dom.ts | 8 +-- src/views/demo/table/index.tsx | 1 - vite.plugin.config.ts | 27 ---------- 10 files changed, 70 insertions(+), 60 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5bf202bc..2df84713 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/package.json b/package.json index bda592e6..a1ff91a8 100755 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 56911eaa..fd6ee6c3 100644 --- a/pnpm-lock.yaml +++ b/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) diff --git a/src/components/RTable/src/Table.tsx b/src/components/RTable/src/Table.tsx index 4fa32509..7b241be9 100644 --- a/src/components/RTable/src/Table.tsx +++ b/src/components/RTable/src/Table.tsx @@ -175,7 +175,6 @@ export default defineComponent({ uuidTable, uuidWrapper, wrapperRef, - tableRef: rTableInst, }) expose({ rTableInst, diff --git a/src/components/RTable/src/components/Print.tsx b/src/components/RTable/src/components/Print.tsx index a4b893b9..b3a0a59d 100644 --- a/src/components/RTable/src/components/Print.tsx +++ b/src/components/RTable/src/components/Print.tsx @@ -22,7 +22,7 @@ export default defineComponent({ name: 'TablePrint', props, setup(props) { - const { tableRef } = inject( + const { wrapperRef } = inject( config.tableKey, {} as TableProvider, ) @@ -41,7 +41,7 @@ export default defineComponent({ printOptions.documentTitle = typeof title === 'string' ? title : '' } - printDom(tableRef, { + printDom(wrapperRef, { printOptions, domToImageOptions, }) diff --git a/src/hooks/web/useDomToImage.ts b/src/hooks/web/useDomToImage.ts index d68ae6fc..f7dc076c 100644 --- a/src/hooks/web/useDomToImage.ts +++ b/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?: ( + result: DomToImageResult, element: T, - result: string | Blob | Uint8ClampedArray | undefined, ) => void /** * - * @param element current dom * @param error dom to image error * * 在 dom 转换为图片失败时执行 */ - createdError?: ( - element: T, - error: Error, - ) => void + createdError?: (error?: Error) => void /** * * @param element current dom * * 无论 dom 转换为图片成功或失败，都会执行 */ - finally?: (element: T) => void + finally?: () => void } const domToImageMethods = { @@ -99,29 +97,45 @@ export const useDomToImage = ( target: BasicTarget, 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 => { + 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 { diff --git a/src/hooks/web/usePrint.ts b/src/hooks/web/usePrint.ts index 423d9e62..0949c670 100644 --- a/src/hooks/web/usePrint.ts +++ b/src/hooks/web/usePrint.ts @@ -27,7 +27,7 @@ export type UsePrintTarget = * 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(), {}) */ diff --git a/src/utils/dom.ts b/src/utils/dom.ts index a40c6a0f..624fc6d5 100644 --- a/src/utils/dom.ts +++ b/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 + printOptions?: Omit domToImageOptions?: Omit } @@ -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 = ( ?.then((res) => { const { print } = usePrint(res, { type: 'image', - ...omit(printOptions as UsePrintOptions, ['type']), + base64: true, + targetStyles: ['*'], + ...omit(printOptions as UsePrintOptions, ['type', 'base64']), }) print() diff --git a/src/views/demo/table/index.tsx b/src/views/demo/table/index.tsx index 45bf4dd8..5564cb81 100644 --- a/src/views/demo/table/index.tsx +++ b/src/views/demo/table/index.tsx @@ -199,7 +199,6 @@ const TableView = defineComponent({ }} diff --git a/vite.plugin.config.ts b/vite.plugin.config.ts index a07dae9d..eecab54e 100644 --- a/vite.plugin.config.ts +++ b/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', - }, ], }), ]