ztxkui 4.2.23-335-beta → 4.2.23-336-beta

package/dist/DemoCom/PrintContainerDemo.js

@@ -143,10 +143,10 @@ var PrintContainerDemo = function () {
         // deptId="1295909543961944065"
         // flowId="scm_print_tdtd"
         // showAboutExport
-        showPrintBtn: true, showPluginPrintBtn: true }, Array(50)
+        showPrintBtn: true, showPluginPrintBtn: true }, Array(2)
         .fill(1)
         .map(function (item, index) {
-        return (React.createElement(React.Fragment, null,
+        return (React.createElement("div", null,
             React.createElement(Tidan, { title: index + '', key: index }),
             React.createElement("div", { className: "print-page-break-after" })));
     })));

package/dist/components/PrintBox/demoComponents/index.js

@@ -111,7 +111,7 @@ var Demo = function () {
                                         orientation: 'p',
                                     },
                                     footerFontConfig: {
-                                        fontSize: '12px',
+                                        fontSize: 12,
                                     },
                                 }))];
                         case 1:
@@ -167,7 +167,7 @@ var Demo = function () {
             }, onExecuteClick: function (type, data) {
                 console.log('操作执行完成后', type, data);
                 return Promise.resolve(true);
-            }, ref: printRef, isAutoSeal: true, request: request, deptId: "1514842459376930817", flowId: "scm_print_thd", 
+            }, ref: printRef, isAutoSeal: true, isWater: false, request: request, deptId: "1514842459376930817", flowId: "scm_print_thd", 
             // pageDom=".html2canvas-container-page"
             pageDom: ".test111", leftPadding: 50, topPadding: 50, bottomPadding: 50, 
             // insertHeader={(pdf, currentPage) => `1111 ${currentPage}`}

package/dist/components/PrintBox/pdf/pdf.js

@@ -47,7 +47,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 };
 import { jsPDF } from 'jspdf';
 import dayjs from 'dayjs';
-import { textToImg } from './water';
+import { textToDomToImg } from './water';
 /**
  * 图片转PDF
  */
@@ -197,79 +197,94 @@ export function insertImgToPdf(pdf, pdfWidth, pdfHeight, config) {
     return __awaiter(this, void 0, void 0, function () {
         var imageConfig, _d, leftPadding, _e, topPadding, _f, bottomPadding, insertHeader, _g, headerTopMargin, insertFooter, _h, footerTopMargin, waterConfig, _j, footerFontConfig, _k, headerFontConfig, image, width, height, canvasWidth, canvasHeight, contentPdfWidth, contentPdfHeight, onePageCanvasHeight, renderedHeight, imageCtx, count, pageNum, pageCanvasDom, currentPageContentHeight, cropOriginalImageData, result, _l, imageBase64, width_1, height_1, insertPdfHeight, result, _m, imageBase64, width_2, height_2;
         return __generator(this, function (_o) {
-            imageConfig = config.imageConfig, _d = config.leftPadding, leftPadding = _d === void 0 ? 15 : _d, _e = config.topPadding, topPadding = _e === void 0 ? 0 : _e, _f = config.bottomPadding, bottomPadding = _f === void 0 ? 0 : _f, insertHeader = config.insertHeader, _g = config.headerTopMargin, headerTopMargin = _g === void 0 ? 20 : _g, insertFooter = config.insertFooter, _h = config.footerTopMargin, footerTopMargin = _h === void 0 ? 20 : _h, waterConfig = config.waterConfig, _j = config.footerFontConfig, footerFontConfig = _j === void 0 ? { fontSize: 13 } : _j, _k = config.headerFontConfig, headerFontConfig = _k === void 0 ? { fontSize: 13 } : _k;
-            image = imageConfig.image, width = imageConfig.width, height = imageConfig.height;
-            canvasWidth = width;
-            canvasHeight = height;
-            contentPdfWidth = pdfWidth - leftPadding * 2;
-            contentPdfHeight = pdfHeight - topPadding - bottomPadding;
-            onePageCanvasHeight = Math.floor(contentPdfHeight * (canvasWidth / contentPdfWidth));
-            renderedHeight = 0;
-            imageCtx = (_a = image) === null || _a === void 0 ? void 0 : _a.getContext('2d');
-            count = Math.ceil(canvasHeight / onePageCanvasHeight);
-            pageNum = 1;
-            while (renderedHeight < canvasHeight) {
-                pageCanvasDom = document.createElement('canvas');
-                // 新创建的canvas中间者 的 宽度即是原图的宽度
-                pageCanvasDom.width = canvasWidth;
-                currentPageContentHeight = Math.min(onePageCanvasHeight, canvasHeight - renderedHeight);
-                pageCanvasDom.height = currentPageContentHeight;
-                cropOriginalImageData = imageCtx === null || imageCtx === void 0 ? void 0 : imageCtx.getImageData(0, // 开始复制的x坐标
-                renderedHeight, // 开始复制的y坐标
-                canvasWidth, // 复制的矩形区域的宽度
-                currentPageContentHeight // 复制的矩形区域的高度
-                );
-                // 2. 将裁剪好的图片 通过putImageData 绘制到 中间者 canvas上
-                (_c = (_b = pageCanvasDom.getContext('2d')) === null || _b === void 0 ? void 0 : _b.putImageData) === null || _c === void 0 ? void 0 : _c.call(_b, cropOriginalImageData, // 插入的图片对象
-                0, // 左上角x坐标
-                0 // 左上角 y坐标
-                );
-                // 这里可以添加页眉 ！！！
-                if (insertHeader) {
+            switch (_o.label) {
+                case 0:
+                    imageConfig = config.imageConfig, _d = config.leftPadding, leftPadding = _d === void 0 ? 15 : _d, _e = config.topPadding, topPadding = _e === void 0 ? 0 : _e, _f = config.bottomPadding, bottomPadding = _f === void 0 ? 0 : _f, insertHeader = config.insertHeader, _g = config.headerTopMargin, headerTopMargin = _g === void 0 ? 20 : _g, insertFooter = config.insertFooter, _h = config.footerTopMargin, footerTopMargin = _h === void 0 ? 20 : _h, waterConfig = config.waterConfig, _j = config.footerFontConfig, footerFontConfig = _j === void 0 ? { fontSize: 13 } : _j, _k = config.headerFontConfig, headerFontConfig = _k === void 0 ? { fontSize: 13 } : _k;
+                    image = imageConfig.image, width = imageConfig.width, height = imageConfig.height;
+                    canvasWidth = width;
+                    canvasHeight = height;
+                    contentPdfWidth = pdfWidth - leftPadding * 2;
+                    contentPdfHeight = pdfHeight - topPadding - bottomPadding;
+                    onePageCanvasHeight = Math.floor(contentPdfHeight * (canvasWidth / contentPdfWidth));
+                    renderedHeight = 0;
+                    imageCtx = (_a = image) === null || _a === void 0 ? void 0 : _a.getContext('2d');
+                    count = Math.ceil(canvasHeight / onePageCanvasHeight);
+                    pageNum = 1;
+                    _o.label = 1;
+                case 1:
+                    if (!(renderedHeight < canvasHeight)) return [3 /*break*/, 6];
+                    pageCanvasDom = document.createElement('canvas');
+                    // 新创建的canvas中间者 的 宽度即是原图的宽度
+                    pageCanvasDom.width = canvasWidth;
+                    currentPageContentHeight = Math.min(onePageCanvasHeight, canvasHeight - renderedHeight);
+                    pageCanvasDom.height = currentPageContentHeight;
+                    cropOriginalImageData = imageCtx === null || imageCtx === void 0 ? void 0 : imageCtx.getImageData(0, // 开始复制的x坐标
+                    renderedHeight, // 开始复制的y坐标
+                    canvasWidth, // 复制的矩形区域的宽度
+                    currentPageContentHeight // 复制的矩形区域的高度
+                    );
+                    // 2. 将裁剪好的图片 通过putImageData 绘制到 中间者 canvas上
+                    (_c = (_b = pageCanvasDom.getContext('2d')) === null || _b === void 0 ? void 0 : _b.putImageData) === null || _c === void 0 ? void 0 : _c.call(_b, cropOriginalImageData, // 插入的图片对象
+                    0, // 左上角x坐标
+                    0 // 左上角 y坐标
+                    );
+                    if (!insertHeader) return [3 /*break*/, 3];
                     result = insertHeader(pdf, pageNum, count);
-                    if (typeof result === 'string') {
-                        _l = textToImg({
+                    if (!(typeof result === 'string')) return [3 /*break*/, 3];
+                    return [4 /*yield*/, textToDomToImg({
                             text: result,
                             font: headerFontConfig,
-                        }), imageBase64 = _l.imageBase64, width_1 = _l.width, height_1 = _l.height;
-                        pdf.addImage(imageBase64, 'PNG', pdfWidth / 2, headerTopMargin, width_1, height_1);
+                        })];
+                case 2:
+                    _l = _o.sent(), imageBase64 = _l.imageBase64, width_1 = _l.width, height_1 = _l.height;
+                    // const { imageBase64, width, height } = textToImg({
+                    //   text: result,
+                    //   font: headerFontConfig,
+                    // });
+                    pdf.addImage(imageBase64, 'PNG', pdfWidth / 2, headerTopMargin, width_1, height_1);
+                    _o.label = 3;
+                case 3:
+                    insertPdfHeight = Math.min(contentPdfHeight, (contentPdfWidth * currentPageContentHeight) / canvasWidth);
+                    pdf.addImage(pageCanvasDom.toDataURL('image/jpeg', 1.0), 'JPEG', leftPadding, topPadding, contentPdfWidth, insertPdfHeight);
+                    // 判断是否添加水印
+                    if (waterConfig) {
+                        addImageWater(pdf, waterConfig.image, {
+                            width: waterConfig.width,
+                            height: waterConfig.height,
+                        });
                     }
-                }
-                insertPdfHeight = Math.min(contentPdfHeight, (contentPdfWidth * currentPageContentHeight) / canvasWidth);
-                pdf.addImage(pageCanvasDom.toDataURL('image/jpeg', 1.0), 'JPEG', leftPadding, topPadding, contentPdfWidth, insertPdfHeight);
-                // 判断是否添加水印
-                if (waterConfig) {
-                    addImageWater(pdf, waterConfig.image, {
-                        width: waterConfig.width,
-                        height: waterConfig.height,
-                    });
-                }
-                // 这里可以添加页脚
-                if (insertFooter) {
+                    if (!insertFooter) return [3 /*break*/, 5];
                     result = insertFooter(pdf, pageNum, count);
-                    if (typeof result === 'string') {
-                        _m = textToImg({
+                    if (!(typeof result === 'string')) return [3 /*break*/, 5];
+                    return [4 /*yield*/, textToDomToImg({
                             text: result,
                             font: footerFontConfig,
-                        }), imageBase64 = _m.imageBase64, width_2 = _m.width, height_2 = _m.height;
-                        pdf.addImage(imageBase64, 'PNG', pdfWidth / 2 - width_2 / 2, contentPdfHeight + topPadding + footerTopMargin, width_2, height_2);
+                        })];
+                case 4:
+                    _m = _o.sent(), imageBase64 = _m.imageBase64, width_2 = _m.width, height_2 = _m.height;
+                    // const { imageBase64, width, height } = textToImg({
+                    //   text: result,
+                    //   font: footerFontConfig,
+                    // });
+                    pdf.addImage(imageBase64, 'PNG', pdfWidth / 2 - width_2 / 2, contentPdfHeight + topPadding + footerTopMargin, width_2, height_2);
+                    _o.label = 5;
+                case 5:
+                    // 移动偏移量
+                    renderedHeight += onePageCanvasHeight;
+                    // 如果移动完后，原图内容还有的话。那么继续分页
+                    if (renderedHeight < canvasHeight) {
+                        pdf.addPage();
+                        pageNum++;
                     }
-                }
-                // 移动偏移量
-                renderedHeight += onePageCanvasHeight;
-                // 如果移动完后，原图内容还有的话。那么继续分页
-                if (renderedHeight < canvasHeight) {
-                    pdf.addPage();
-                    pageNum++;
-                }
-                try {
-                    pageCanvasDom = null;
-                }
-                catch (err) {
-                    console.log('[ 裁剪过程中遇到异常 err ] =>', err);
-                }
+                    try {
+                        pageCanvasDom = null;
+                    }
+                    catch (err) {
+                        console.log('[ 裁剪过程中遇到异常 err ] =>', err);
+                    }
+                    return [3 /*break*/, 1];
+                case 6: return [2 /*return*/];
             }
-            return [2 /*return*/];
         });
     });
 }

package/dist/components/PrintBox/pdf/water.d.ts

@@ -14,6 +14,14 @@ export declare function textToImg(config: ITextToImg): {
     width: any;
     height: any;
 };
+/**
+ * 将文本生成高清canvas图片
+ */
+export declare function textToDomToImg(config: ITextToImg): Promise<{
+    imageBase64: string;
+    width: number;
+    height: number;
+}>;
 /**
  * 默认配置
  */

package/dist/components/PrintBox/pdf/water.js

@@ -1,5 +1,42 @@
 // import dayjs from 'dayjs';
 // import { parseToken } from './auth';
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { domToCanvas } from './canvas';
 /**
  * 创建水印
  */
@@ -55,7 +92,7 @@ export function textToImg(config) {
     var ctx = canvas.getContext('2d');
     if (ctx) {
         // 获取设备像素密度和浏览器绘制比例
-        var ratio = window.devicePixelRatio || 1 + 0.5;
+        var ratio = window.devicePixelRatio || 1 + 1.5;
         // 设置canvas的逻辑尺寸
         canvas.width = width * ratio;
         canvas.height = height * ratio;
@@ -76,6 +113,45 @@ export function textToImg(config) {
         height: height,
     };
 }
+/**
+ * 将文本生成高清canvas图片
+ */
+export function textToDomToImg(config) {
+    return __awaiter(this, void 0, void 0, function () {
+        var text, fontOption, font, span, textCanvas, imageBase64, width, height;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    text = config.text, fontOption = config.font;
+                    font = getDefaultFont(fontOption);
+                    span = document.createElement('span');
+                    span.innerText = text;
+                    span.style.color = font.color;
+                    span.style.fontSize = font.fontSize + "px";
+                    span.style.fontWeight = font.fontWeight + '';
+                    span.style.fontStyle = font.fontStyle;
+                    span.style.fontFamily = font.fontFamily;
+                    span.style.textAlign = font.textAlign;
+                    document.body.appendChild(span);
+                    return [4 /*yield*/, domToCanvas(span)];
+                case 1:
+                    textCanvas = _a.sent();
+                    imageBase64 = textCanvas.toDataURL('image/jpeg', 1.0);
+                    width = span.offsetWidth;
+                    height = span.offsetHeight;
+                    document.body.removeChild(span);
+                    return [2 /*return*/, {
+                            imageBase64: imageBase64,
+                            width: width,
+                            height: height,
+                        }];
+            }
+        });
+    });
+}
+/**
+ * 将dom字符串生成高清的canvas图片
+ */
 /**
  * 根据文本内容 获取字段宽度
  */

package/dist/components/PrintContainer/kkJSBridge.js

@@ -1,5 +1,7 @@
 import { getToken } from 'ztxkutils/dist/authority';
+import { encodeFileIdByDownload } from 'ztxkutils/dist/fileOperation';
 function createDownloadUrl(apiUrl, fileId, otherOptions) {
+    fileId = encodeFileIdByDownload(fileId);
     var token = getToken();
     var _apiUrl = apiUrl.endsWith('/')
         ? apiUrl.slice(0, apiUrl.length - 1)

package/dist/components/PrintContainer/print.js

@@ -609,19 +609,12 @@ function setPdfWater(pdf, waterBase64, imgWidth, imgHeight) {
 /**
  * @author xjy
  * @description 性能优化，减少页面dom数量
- * @param allDom需要打印的dom节点，parentDom需要打印的dom的父节点
+ * @param allDom 需要打印的dom节点，parentDom 需要打印的dom的父节点
+ * @param handler 处理每个dom节点的函数，返回Promise
  */
 function reduceDom(allDom, parentDom, handler) {
     return __awaiter(this, void 0, void 0, function () {
-        function getSpinning() {
-            return new Promise(function (resolve) {
-                setTimeout(function () {
-                    var spinning = document.querySelector('.ant-spin-spinning');
-                    resolve(spinning);
-                }, 0);
-            });
-        }
-        var domList, children, spinning, promiseAllDomArray, _a, _b, _i, i, element, _c, _d, _e, children_1, element;
+        var domList, children, spinning, fragment, _i, children_1, element, promiseAllDomArray, _a, _b, _c, i_3, element, _d, _e, i, timer;
         return __generator(this, function (_f) {
             switch (_f.label) {
                 case 0:
@@ -638,39 +631,66 @@ function reduceDom(allDom, parentDom, handler) {
                         spinning.style.alignItems = 'center';
                         spinning.innerHTML = '正在生成PDF...';
                     }
+                    fragment = document.createDocumentFragment();
                     // 卸载dom
-                    parentDom.innerHTML = '';
+                    for (_i = 0, children_1 = children; _i < children_1.length; _i++) {
+                        element = children_1[_i];
+                        parentDom.removeChild(element);
+                        fragment.appendChild(element);
+                    }
                     promiseAllDomArray = [];
                     _a = [];
                     for (_b in domList)
                         _a.push(_b);
-                    _i = 0;
+                    _c = 0;
                     _f.label = 2;
                 case 2:
-                    if (!(_i < _a.length)) return [3 /*break*/, 5];
-                    i = _a[_i];
+                    if (!(_c < _a.length)) return [3 /*break*/, 5];
+                    i_3 = _a[_c];
                     if (spinning) {
-                        spinning.innerHTML = "<p>\u6B63\u5728\u751F\u6210PDF...</p><p>\u5F53\u524D\u8FDB\u5EA6" + (1 + Number(i)) + "/" + domList.length + "\u9875</p>";
+                        spinning.innerHTML = "<p>\u6B63\u5728\u751F\u6210PDF...</p><p>\u5F53\u524D\u8FDB\u5EA6" + (1 + Number(i_3)) + "/" + domList.length + "\u9875</p>";
                     }
-                    element = domList[i];
+                    element = domList[i_3].cloneNode(true);
                     parentDom.appendChild(element);
-                    _d = (_c = promiseAllDomArray).push;
-                    return [4 /*yield*/, handler(element, i)];
+                    _e = (_d = promiseAllDomArray).push;
+                    return [4 /*yield*/, handler(element, i_3)];
                 case 3:
-                    _d.apply(_c, [_f.sent()]);
+                    _e.apply(_d, [_f.sent()]);
                     parentDom.removeChild(element);
                     _f.label = 4;
                 case 4:
-                    _i++;
+                    _c++;
                     return [3 /*break*/, 2];
                 case 5:
                     // 添加dom
-                    for (_e = 0, children_1 = children; _e < children_1.length; _e++) {
-                        element = children_1[_e];
-                        parentDom.appendChild(element);
+                    // for (let element of children) {
+                    //   parentDom.appendChild(element);
+                    // }
+                    parentDom.appendChild(fragment);
+                    i = 0;
+                    if (spinning) {
+                        spinning.innerHTML = "<p>\u6B63\u5728\u5BFC\u51FAPDF...</p><p>\u7B49\u5F85" + (1 + i) + "\u79D2";
                     }
+                    timer = setInterval(function () {
+                        var spinning = document.querySelector('.ant-spin-spinning');
+                        if (spinning) {
+                            spinning.innerHTML = "<p>\u6B63\u5728\u5BFC\u51FAPDF...</p><p>\u7B49\u5F85" + (1 + i) + "\u79D2";
+                            i++;
+                        }
+                        else {
+                            timer && clearInterval(timer);
+                        }
+                    }, 1000);
                     return [2 /*return*/, promiseAllDomArray];
             }
         });
     });
 }
+function getSpinning() {
+    return new Promise(function (resolve) {
+        setTimeout(function () {
+            var spinning = document.querySelector('.ant-spin-spinning');
+            resolve(spinning);
+        }, 0);
+    });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ztxkui",
-  "version": "4.2.23-335-beta",
+  "version": "4.2.23-336-beta",
   "private": false,
   "description": "React components library",
   "author": "zt-front-end",