dompdf.js 1.0.3 → 1.1.0

package/dist/dompdf.esm.js

@@ -1,5 +1,5 @@
 /*!
- * dompdf.js 1.0.3 <https://dompdfjs.lisky.com.cn>
+ * dompdf.js 1.1.0 <https://dompdfjs.lisky.com.cn>
  * Copyright (c) 2025 lfc <https://dompdfjs.lisky.com.cn/>
  * Released under MIT License
  */
@@ -3491,6 +3491,27 @@ snapdom.download = async (el, options = {}) => {
   return await capture.download({ format, filename, backgroundColor });
 };
 
+var elementDebuggerAttribute$1 = 'data-html2canvas-debug';
+var getElementDebugType$1 = function (element) {
+    var attribute = element.getAttribute(elementDebuggerAttribute$1);
+    switch (attribute) {
+        case 'all':
+            return 1 /* DebuggerType.ALL */;
+        case 'clone':
+            return 2 /* DebuggerType.CLONE */;
+        case 'parse':
+            return 3 /* DebuggerType.PARSE */;
+        case 'render':
+            return 4 /* DebuggerType.RENDER */;
+        default:
+            return 0 /* DebuggerType.NONE */;
+    }
+};
+var isDebugging$1 = function (element, type) {
+    var elementType = getElementDebugType$1(element);
+    return elementType === 1 /* DebuggerType.ALL */ || type === elementType;
+};
+
 var backgroundClip$1 = {
     name: 'background-clip',
     initialValue: 'border-box',
@@ -3782,12 +3803,6 @@ var prefixRadialGradient$1 = function (context, tokens) {
     return { size: size, shape: shape, stops: stops, position: position, type: 2 /* CSSImageType.RADIAL_GRADIENT */ };
 };
 
-var isLinearGradient$1 = function (background) {
-    return background.type === 1 /* CSSImageType.LINEAR_GRADIENT */;
-};
-var isRadialGradient$1 = function (background) {
-    return background.type === 2 /* CSSImageType.RADIAL_GRADIENT */;
-};
 var image$1 = {
     name: 'image',
     parse: function (context, value) {
@@ -5112,27 +5127,6 @@ var parse$1 = function (context, descriptor, style) {
     }
 };
 
-var elementDebuggerAttribute$1 = 'data-html2canvas-debug';
-var getElementDebugType$1 = function (element) {
-    var attribute = element.getAttribute(elementDebuggerAttribute$1);
-    switch (attribute) {
-        case 'all':
-            return 1 /* DebuggerType.ALL */;
-        case 'clone':
-            return 2 /* DebuggerType.CLONE */;
-        case 'parse':
-            return 3 /* DebuggerType.PARSE */;
-        case 'render':
-            return 4 /* DebuggerType.RENDER */;
-        default:
-            return 0 /* DebuggerType.NONE */;
-    }
-};
-var isDebugging$1 = function (element, type) {
-    var elementType = getElementDebugType$1(element);
-    return elementType === 1 /* DebuggerType.ALL */ || type === elementType;
-};
-
 var ElementContainer$1 = /** @class */ (function () {
     function ElementContainer(context, element) {
         this.context = context;
@@ -5141,6 +5135,8 @@ var ElementContainer$1 = /** @class */ (function () {
         this.flags = 0;
         this.foreignobjectrendering = false;
         this.parentforeignobjectrendering = false;
+        this.divisionDisable = false;
+        this.offset = 0;
         if (isDebugging$1(element, 3 /* DebuggerType.PARSE */)) {
             debugger;
         }
@@ -5910,7 +5906,9 @@ var parseNodeTree$1 = function (context, node, parent, root, foreignObjectRender
         }
         else if (isElementNode$1(childNode)) {
             if (isSlotElement$1(childNode) && childNode.assignedNodes) {
-                childNode.assignedNodes().forEach(function (childNode) { return parseNodeTree$1(context, childNode, parent, root, foreignObjectRendererList); });
+                childNode
+                    .assignedNodes()
+                    .forEach(function (childNode) { return parseNodeTree$1(context, childNode, parent, root, foreignObjectRendererList); });
             }
             else {
                 var container = createContainer$1(context, childNode);
@@ -5922,9 +5920,14 @@ var parseNodeTree$1 = function (context, node, parent, root, foreignObjectRender
                     else if (createsStackingContext$1(container.styles)) {
                         container.flags |= 2 /* FLAGS.CREATES_STACKING_CONTEXT */;
                     }
-                    if (isElementNode$1(childNode) && (childNode.hasAttribute('foreignobjectrendering') || parent.foreignobjectrendering)) {
+                    if (isElementNode$1(childNode) &&
+                        (childNode.hasAttribute('foreignobjectrendering') || parent.foreignobjectrendering)) {
                         container.foreignobjectrendering = true;
                     }
+                    if (isElementNode$1(childNode) &&
+                        (childNode.hasAttribute('divisionDisable') || parent.divisionDisable)) {
+                        container.divisionDisable = true;
+                    }
                     if (LIST_OWNERS$1.indexOf(childNode.tagName) !== -1) {
                         container.flags |= 8 /* FLAGS.IS_LIST_OWNER */;
                     }
@@ -6004,11 +6007,12 @@ var parseTree$1 = function (context, element) { return __awaiter$1(void 0, void
                 // 修改 parseNodeTree 调用，传入局部列表
                 parseNodeTree$1(context, element, container, container, foreignObjectRendererList);
                 uniqueList = foreignObjectRendererList.filter(function (item, index, self) {
-                    return index === self.findIndex(function (t) { return t === item; });
-                });
-                screenshotPromises = uniqueList.map(function (item) {
-                    return renderForeignObject(item);
+                    return index ===
+                        self.findIndex(function (t) {
+                            return t === item;
+                        });
                 });
+                screenshotPromises = uniqueList.map(function (item) { return renderForeignObject(item); });
                 return [4 /*yield*/, Promise.all(screenshotPromises)];
             case 1:
                 screenshotResults = _a.sent();
@@ -6091,7 +6095,7 @@ var renderForeignObject = function (element) { return __awaiter$1(void 0, void 0
             case 2:
                 _a.trys.push([2, 4, , 5]);
                 return [4 /*yield*/, capture.toPng({
-                        quality: 0.1,
+                        quality: 0.1
                         // width: Math.ceil(rect.width),
                         // height: Math.ceil(rect.height)
                     })];
@@ -8981,48 +8985,64 @@ var parseStackingContexts$1 = function (container) {
     return root;
 };
 
-// 遮罩偏移常量
-// const MASK_OFFSET = 10000;
-// Canvas渲染器类,继承自Renderer
 var CanvasRenderer$1 = /** @class */ (function (_super) {
     __extends$1(CanvasRenderer, _super);
-    // 构造函数
     function CanvasRenderer(context, options) {
-        var _this = this;
-        console.log('options参数', options, context);
-        _this = _super.call(this, context, options) || this;
-        _this._activeEffects = []; // 活动效果数组
+        var _this = _super.call(this, context, options) || this;
+        _this._activeEffects = [];
+        _this.totalPages = 1;
         _this.canvas = options.canvas ? options.canvas : document.createElement('canvas');
         _this.ctx = _this.canvas.getContext('2d');
-        // 计算页面尺寸并转换为 pt 单位 (1pt = 1/72 inch, 1px = 1/96 inch)
         var pxToPt = function (px) { return px * (72 / 96); };
-        //
         var pageWidth = pxToPt(options.width);
         var pageHeight = pxToPt(options.height);
-        // 初始化 jsPDF
+        // const enc =
+        //     this.options.encryption &&
+        //     (this.options.encryption.userPassword ||
+        //         this.options.encryption.ownerPassword ||
+        //         (this.options.encryption.userPermissions && this.options.encryption.userPermissions.length))
+        //         ? this.options.encryption
+        //         : [];
+        var encOptions = _this.options.encryption
+            ? {
+                userPassword: _this.options.encryption.userPassword,
+                ownerPassword: _this.options.encryption.ownerPassword,
+                userPermissions: _this.options.encryption.userPermissions
+            }
+            : undefined;
         _this.jspdfCtx = new E$1({
             orientation: pageWidth > pageHeight ? 'landscape' : 'portrait',
             unit: 'pt',
-            format: [pageWidth, pageHeight],
-            hotfixes: ["px_scaling"]
+            format: options.pagination && options.format ? options.format : [pageHeight, pageWidth],
+            hotfixes: ['px_scaling'],
+            putOnlyUsedFonts: options.putOnlyUsedFonts,
+            compress: options.compress,
+            precision: options.precision,
+            floatPrecision: options.floatPrecision,
+            encryption: encOptions
         });
-        // 设置PDF文件的保存方式
+        //     orientation: pageWidth > pageHeight ? 'landscape' : 'portrait',
+        //     unit: 'pt',
+        //     format: options.pagination && options.format ? options.format : [pageHeight, pageWidth],
+        //     hotfixes: ['px_scaling'],
+        //     putOnlyUsedFonts: options.putOnlyUsedFonts,
+        //     compress: options.compress,
+        //     precision: options.precision,
+        //     floatPrecision: options.floatPrecision,
+        //     encryption: enc
+        // });
         _this.context2dCtx = _this.jspdfCtx.context2d;
         _this.context2dCtx.scale(0.75, 0.75);
         _this.context2dCtx.translate(-options.x, -options.y);
-        // 确保字体已加载并注册到 jsPDF
         if (options.fontConfig) {
             try {
                 _this.loadFont();
             }
             catch (error) {
                 console.warn('Failed to set font:', error);
-                // 如果设置失败，使用默认字体
                 _this.jspdfCtx.setFont('Helvetica');
             }
         }
-        // this.jspdfCtx.setFont('SourceHanSansSC-Normal-Min');
-        // 将 pxToPt 保存为实例属性，以便其他方法使用
         _this.pxToPt = pxToPt;
         if (!options.canvas) {
             _this.canvas.width = 10;
@@ -9031,9 +9051,6 @@ var CanvasRenderer$1 = /** @class */ (function (_super) {
             _this.canvas.style.height = "10px";
         }
         _this.fontMetrics = new FontMetrics$1(document);
-        // this.ctx.scale(this.options.scale, this.options.scale);
-        // this.ctx.translate(-options.x, -options.y);
-        // this.ctx.textBaseline = 'bottom';
         _this.context2dCtx.textBaseline = 'bottom';
         _this._activeEffects = [];
         _this.context.logger.debug("Canvas renderer initialized (".concat(options.width, "x").concat(options.height, ") with scale ").concat(options.scale));
@@ -9043,67 +9060,23 @@ var CanvasRenderer$1 = /** @class */ (function (_super) {
         return __awaiter$1(this, void 0, void 0, function () {
             var fontData;
             return __generator$1(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        if (!this.options.fontConfig.fontBase64) return [3 /*break*/, 1];
-                        // 直接使用 Base64 编码
-                        fontData = this.options.fontConfig.fontBase64;
-                        return [3 /*break*/, 3];
-                    case 1:
-                        if (!this.options.fontConfig.fontUrl) return [3 /*break*/, 3];
-                        return [4 /*yield*/, this.loadFontFromURL(this.options.fontConfig.fontUrl)];
-                    case 2:
-                        fontData = _a.sent();
-                        _a.label = 3;
-                    case 3:
-                        // console.log('fontData',fontData)
-                        // 将字体添加到 jsPDF
-                        this.addFontToJsPDF(fontData);
-                        return [2 /*return*/];
-                }
-            });
-        });
-    };
-    CanvasRenderer.prototype.loadFontFromURL = function (url) {
-        return __awaiter$1(this, void 0, void 0, function () {
-            var response, blob;
-            return __generator$1(this, function (_a) {
-                switch (_a.label) {
-                    case 0: return [4 /*yield*/, fetch(url, {
-                            mode: 'no-cors',
-                            headers: {
-                                'Content-Type': 'font/ttf'
-                            }
-                        })];
-                    case 1:
-                        response = _a.sent();
-                        return [4 /*yield*/, response.blob()];
-                    case 2:
-                        blob = _a.sent();
-                        // const fontUrl = URL.createObjectURL(blob);
-                        // console.log('response', blob, fontUrl)
-                        // 注意：no-cors 模式下无法读取响应内容！
-                        // const blob = await response.blob();
-                        return [2 /*return*/, new Promise(function (resolve, reject) {
-                                var reader = new FileReader();
-                                reader.onload = function () { return resolve(reader.result.split(',')[1]); }; // 提取 Base64 数据
-                                reader.onerror = function () { return reject(new Error('字体文件读取失败')); };
-                                reader.readAsDataURL(blob);
-                            })];
+                if (this.options.fontConfig.fontBase64) {
+                    fontData = this.options.fontConfig.fontBase64;
                 }
+                this.addFontToJsPDF(fontData);
+                return [2 /*return*/];
             });
         });
     };
     CanvasRenderer.prototype.addFontToJsPDF = function (fontData) {
-        var _a = this.options.fontConfig, fontFamily = _a.fontFamily, fontWeight = _a.fontWeight, fontStyle = _a.fontStyle;
+        var fontFamily = this.options.fontConfig.fontFamily;
         if (!fontFamily) {
             return;
         }
-        this.jspdfCtx.addFileToVFS("".concat(fontFamily, ".ttf"), fontData); // 将字体添加到虚拟文件系统
-        this.jspdfCtx.addFont("".concat(fontFamily, ".ttf"), fontFamily, fontStyle, fontWeight); // 注册字体
-        this.jspdfCtx.setFont(fontFamily); // 设置当前字体
+        this.jspdfCtx.addFileToVFS("".concat(fontFamily, ".ttf"), fontData);
+        this.jspdfCtx.addFont("".concat(fontFamily, ".ttf"), fontFamily, 'normal');
+        this.jspdfCtx.setFont(fontFamily);
     };
-    // 应用效果数组
     CanvasRenderer.prototype.applyEffects = function (effects) {
         var _this = this;
         while (this._activeEffects.length) {
@@ -9111,46 +9084,29 @@ var CanvasRenderer$1 = /** @class */ (function (_super) {
         }
         effects.forEach(function (effect) { return _this.applyEffect(effect); });
     };
-    // 应用单个效果
     CanvasRenderer.prototype.applyEffect = function (effect) {
         this.ctx.save();
-        // this.context2dCtx.save()
         if (isOpacityEffect$1(effect)) {
             this.ctx.globalAlpha = effect.opacity;
-            // this.context2dCtx.globalAlpha = effect.opacity
         }
         if (isTransformEffect$1(effect)) {
             this.ctx.translate(effect.offsetX, effect.offsetY);
             this.ctx.transform(effect.matrix[0], effect.matrix[1], effect.matrix[2], effect.matrix[3], effect.matrix[4], effect.matrix[5]);
             this.ctx.translate(-effect.offsetX, -effect.offsetY);
-            // this.context2dCtx.translate(effect.offsetX, effect.offsetY);
-            // this.context2dCtx.transform(
-            //     effect.matrix[0],
-            //     effect.matrix[1],
-            //     effect.matrix[2],
-            //     effect.matrix[3],
-            //     effect.matrix[4],
-            //     effect.matrix[5]
-            // );
-            // this.context2dCtx.translate(-effect.offsetX, -effect.offsetY);
         }
         if (isClipEffect$1(effect)) {
             this.path(effect.path);
             this.ctx.clip();
-            // this.context2dCtx.clip()
         }
         this._activeEffects.push(effect);
     };
-    // 移除最后应用的效果
     CanvasRenderer.prototype.popEffect = function () {
         this._activeEffects.pop();
-        // this.ctx.restore();
         this.context2dCtx.restore();
         if (this.options.fontConfig && this.options.fontConfig.fontFamily) {
             this.jspdfCtx.setFont(this.options.fontConfig.fontFamily);
         }
     };
-    // 渲染堆叠上下文
     CanvasRenderer.prototype.renderStack = function (stack) {
         return __awaiter$1(this, void 0, void 0, function () {
             var styles;
@@ -9162,13 +9118,12 @@ var CanvasRenderer$1 = /** @class */ (function (_super) {
                         return [4 /*yield*/, this.renderStackContent(stack)];
                     case 1:
                         _a.sent();
-                        return [3 /*break*/, 2];
+                        _a.label = 2;
                     case 2: return [2 /*return*/];
                 }
             });
         });
     };
-    // 渲染节点
     CanvasRenderer.prototype.renderNode = function (paint) {
         return __awaiter$1(this, void 0, void 0, function () {
             return __generator$1(this, function (_a) {
@@ -9190,27 +9145,19 @@ var CanvasRenderer$1 = /** @class */ (function (_super) {
             });
         });
     };
-    // 渲染带有字母间距的文本
     CanvasRenderer.prototype.renderTextWithLetterSpacing = function (text, letterSpacing, baseline) {
         var _this = this;
         if (letterSpacing === 0) {
-            // console.log(text.text, text.bounds.left,'绘制文字-没有letterSpacing')
-            // this.ctx.fillText(text.text, text.bounds.left, text.bounds.top + baseline);
             this.context2dCtx.fillText(text.text, text.bounds.left, text.bounds.top + baseline);
         }
         else {
             var letters = segmentGraphemes$1(text.text);
             letters.reduce(function (left, letter) {
-                // console.log(left, letter,'绘制文字')
-                // this.ctx.fillText(letter, left, text.bounds.top + baseline);
-                // this.context2dCtx.fillText(letter, left - leftMargin, text.bounds.top + baseline - topMargin);
-                // 使用jspdf绘制文字
                 _this.context2dCtx.fillText(letter, left, text.bounds.top + baseline);
                 return left + _this.ctx.measureText(letter).width;
             }, text.bounds.left);
         }
     };
-    // 创建字体样式
     CanvasRenderer.prototype.createFontStyle = function (styles) {
         var fontVariant = styles.fontVariant
             .filter(function (variant) { return variant === 'normal' || variant === 'small-caps'; })
@@ -9225,18 +9172,16 @@ var CanvasRenderer$1 = /** @class */ (function (_super) {
             fontSize
         ];
     };
-    // 添加一个新的颜色转换函数
     CanvasRenderer.prototype.convertColor = function (color) {
-        // 如果是透明色，返回白色
         if (isTransparent$1(color)) {
             return '#FFFFFF';
         }
-        // 将 rgba 转换为 rgb
-        // 从32位整数中提取RGB分量
         var r = 0xff & (color >> 24);
         var g = 0xff & (color >> 16);
         var b = 0xff & (color >> 8);
-        return "#".concat(r.toString(16).padStart(2, '0')).concat(g.toString(16).padStart(2, '0')).concat(b.toString(16).padStart(2, '0'));
+        return "#".concat(r.toString(16).padStart(2, '0')).concat(g.toString(16).padStart(2, '0')).concat(b
+            .toString(16)
+            .padStart(2, '0'));
     };
     CanvasRenderer.prototype.renderTextNode = function (text, styles) {
         return __awaiter$1(this, void 0, void 0, function () {
@@ -9244,15 +9189,12 @@ var CanvasRenderer$1 = /** @class */ (function (_super) {
             var _this = this;
             return __generator$1(this, function (_c) {
                 _a = this.createFontStyle(styles), font = _a[0], fontFamily = _a[1], fontSize = _a[2];
-                // ,
-                // 设置 CanvasRenderingContext2D 的字体样式
                 this.ctx.font = font;
-                // 设置 jsPDF context2d 的字体样式 (如果需要，jsPDF 通常会自动同步)
-                this.context2dCtx.font = this.options.fontConfig.fontFamily; // 通常不需要显式设置，jsPDF 会处理
+                this.context2dCtx.font = this.options.fontConfig.fontFamily;
                 this.ctx.direction = styles.direction === 1 /* DIRECTION.RTL */ ? 'rtl' : 'ltr';
-                this.context2dCtx.direction = styles.direction === 1 /* DIRECTION.RTL */ ? 'rtl' : 'ltr'; // 根据 jsPDF API 调整
+                this.context2dCtx.direction = styles.direction === 1 /* DIRECTION.RTL */ ? 'rtl' : 'ltr';
                 this.ctx.textAlign = 'left';
-                this.context2dCtx.textAlign = 'left'; // 根据 jsPDF API 调整
+                this.context2dCtx.textAlign = 'left';
                 fontSizePt = styles.fontSize.number;
                 this.jspdfCtx.setFontSize(fontSizePt);
                 _b = this.fontMetrics.getMetrics(fontFamily, fontSize), baseline = _b.baseline, middle = _b.middle;
@@ -9261,15 +9203,9 @@ var CanvasRenderer$1 = /** @class */ (function (_super) {
                     paintOrder.forEach(function (paintOrderLayer) {
                         switch (paintOrderLayer) {
                             case 0 /* PAINT_ORDER_LAYER.FILL */:
-                                // 设置 CanvasRenderingContext2D 的填充样式
-                                // this.ctx.fillStyle = asString(styles.color);
-                                // 设置 jsPDF context2d 的填充样式
                                 _this.context2dCtx.fillStyle = asString$1(styles.color);
                                 _this.renderTextWithLetterSpacing(textItem, styles.letterSpacing, baseline);
                                 if (styles.textDecorationLine.length) {
-                                    // 设置 CanvasRenderingContext2D 的填充样式
-                                    // this.ctx.fillStyle = asString(styles.textDecorationColor || styles.color);
-                                    // 设置 jsPDF context2d 的填充样式
                                     _this.context2dCtx.fillStyle = asString$1(styles.textDecorationColor || styles.color);
                                     styles.textDecorationLine.forEach(function (textDecorationLine) {
                                         var x = textItem.bounds.left;
@@ -9277,18 +9213,15 @@ var CanvasRenderer$1 = /** @class */ (function (_super) {
                                         var y_underline = Math.round(textItem.bounds.top + baseline);
                                         var y_overline = Math.round(textItem.bounds.top);
                                         var y_line_through = Math.ceil(textItem.bounds.top + middle);
-                                        var thickness = 1; // 装饰线的粗细，可以根据需要调整
+                                        var thickness = 1;
                                         switch (textDecorationLine) {
                                             case 1 /* TEXT_DECORATION_LINE.UNDERLINE */:
-                                                // this.ctx.fillRect(x, y_underline, width, thickness);
                                                 _this.context2dCtx.fillRect(x, y_underline, width, thickness);
                                                 break;
                                             case 2 /* TEXT_DECORATION_LINE.OVERLINE */:
-                                                // this.ctx.fillRect(x, y_overline, width, thickness);
                                                 _this.context2dCtx.fillRect(x, y_overline, width, thickness);
                                                 break;
                                             case 3 /* TEXT_DECORATION_LINE.LINE_THROUGH */:
-                                                // this.ctx.fillRect(x, y_line_through, width, thickness);
                                                 _this.context2dCtx.fillRect(x, y_line_through, width, thickness);
                                                 break;
                                         }
@@ -9297,24 +9230,10 @@ var CanvasRenderer$1 = /** @class */ (function (_super) {
                                 break;
                             case 1 /* PAINT_ORDER_LAYER.STROKE */:
                                 if (styles.webkitTextStrokeWidth && textItem.text.trim().length) {
-                                    // 设置 CanvasRenderingContext2D 的描边样式
-                                    // this.ctx.strokeStyle = asString(styles.webkitTextStrokeColor);
-                                    // this.ctx.lineWidth = styles.webkitTextStrokeWidth;
-                                    // this.ctx.lineJoin = !!(window as any).chrome ? 'miter' : 'round';
-                                    // 设置 jsPDF context2d 的描边样式
                                     _this.context2dCtx.strokeStyle = asString$1(styles.webkitTextStrokeColor);
                                     _this.context2dCtx.lineWidth = styles.webkitTextStrokeWidth;
-                                    // this.context2dCtx.lineJoin = ...; // 根据 jsPDF API 调整
-                                    // CanvasRenderingContext2D 描边
-                                    // this.ctx.strokeText(textItem.text, textItem.bounds.left, textItem.bounds.top + baseline);
-                                    // jsPDF context2d 描边
                                     _this.context2dCtx.strokeText(textItem.text, textItem.bounds.left, textItem.bounds.top + baseline);
                                 }
-                                // 清除 CanvasRenderingContext2D 的描边样式
-                                // this.ctx.strokeStyle = '';
-                                // this.ctx.lineWidth = 0;
-                                // this.ctx.lineJoin = 'miter';
-                                // 清除 jsPDF context2d 的描边样式
                                 _this.context2dCtx.strokeStyle = '';
                                 _this.context2dCtx.lineWidth = 0;
                                 _this.context2dCtx.lineJoin = 'miter';
@@ -9335,31 +9254,14 @@ var CanvasRenderer$1 = /** @class */ (function (_super) {
             this.ctx.clip();
             this.ctx.drawImage(image, 0, 0, container.intrinsicWidth, container.intrinsicHeight, box.left, box.top, box.width, box.height);
             this.ctx.restore();
-            // this.context2dCtx.save();
-            // this.context2dCtx.clip();
-            // this.context2dCtx.drawImage(
-            //     image,
-            //     0,
-            //     0,
-            //     container.intrinsicWidth,
-            //     container.intrinsicHeight,
-            //     box.left,
-            //     box.top,
-            //     box.width,
-            //     box.height
-            // );
-            // this.context2dCtx.restore();
         }
     };
-    // 渲染节点内容
-    // 渲染节点内容的异步方法
     CanvasRenderer.prototype.renderNodeContent = function (paint) {
         return __awaiter$1(this, void 0, void 0, function () {
-            var container, curves, styles, _i, _a, child, image, bounds, x, y, width, height, bounds, x, y, width, height, dataURL, image, bounds, x, y, width, height, canvas, ctx, dataURL, e_2, iframeRenderer, canvas, size, _b, fontFamily, fontSize, baseline, bounds, x, textBounds, img, image, url, fontFamily, bounds;
+            var container, curves, styles, _i, _a, child, image, bounds, x, y, width, height, bounds, x, y, width, height, dataURL, image, bounds, x, y, width, height, canvas, ctx, dataURL, e_2, size, _b, fontFamily, fontSize, baseline, bounds, x, textBounds, img, image, url, fontFamily, bounds;
             return __generator$1(this, function (_c) {
                 switch (_c.label) {
                     case 0:
-                        // 应用内容效果
                         this.applyEffects(paint.getEffects(4 /* EffectTarget.CONTENT */));
                         container = paint.container;
                         curves = paint.curves;
@@ -9384,18 +9286,14 @@ var CanvasRenderer$1 = /** @class */ (function (_super) {
                         return [4 /*yield*/, this.context.cache.match(container.src)];
                     case 6:
                         image = _c.sent();
-                        // 渲染到 Canvas
                         this.renderReplacedElement(container, curves, image);
-                        // 添加到 PDF
                         try {
                             bounds = contentBox$1(container);
-                            x = this.pxToPt(bounds.left);
-                            y = this.pxToPt(bounds.top);
+                            x = this.pxToPt(bounds.left - this.options.x);
+                            y = this.pxToPt(bounds.top - this.options.y);
                             width = this.pxToPt(bounds.width);
                             height = this.pxToPt(bounds.height);
-                            // 将图片添加到 PDF
-                            this.jspdfCtx.addImage(image, 'JPEG', // 默认使用 JPEG 格式
-                            x, y, width, height);
+                            this.addImagePdf(image, 'JPEG', x, y, width, height);
                         }
                         catch (err) {
                             this.context.logger.error("Error adding image to PDF: ".concat(err));
@@ -9407,18 +9305,15 @@ var CanvasRenderer$1 = /** @class */ (function (_super) {
                         return [3 /*break*/, 8];
                     case 8:
                         if (container instanceof CanvasElementContainer$1) {
-                            // 渲染到 Canvas
                             this.renderReplacedElement(container, curves, container.canvas);
-                            // 添加到 PDF
                             try {
                                 bounds = contentBox$1(container);
-                                x = this.pxToPt(bounds.left);
-                                y = this.pxToPt(bounds.top);
+                                x = this.pxToPt(bounds.left - this.options.x);
+                                y = this.pxToPt(bounds.top - this.options.y);
                                 width = this.pxToPt(bounds.width);
                                 height = this.pxToPt(bounds.height);
                                 dataURL = container.canvas.toDataURL('image/png', 0.95);
-                                // 将 Canvas 添加到 PDF
-                                this.jspdfCtx.addImage(dataURL, 'PNG', x, y, width, height);
+                                this.addImagePdf(dataURL, 'PNG', x, y, width, height);
                             }
                             catch (err) {
                                 this.context.logger.error("Error adding canvas to PDF: ".concat(err));
@@ -9431,13 +9326,11 @@ var CanvasRenderer$1 = /** @class */ (function (_super) {
                         return [4 /*yield*/, this.context.cache.match(container.svg)];
                     case 10:
                         image = _c.sent();
-                        // 渲染到 Canvas
                         this.renderReplacedElement(container, curves, image);
-                        // 添加到 PDF
                         try {
                             bounds = contentBox$1(container);
-                            x = this.pxToPt(bounds.left);
-                            y = this.pxToPt(bounds.top);
+                            x = this.pxToPt(bounds.left - this.options.x);
+                            y = this.pxToPt(bounds.top - this.options.y);
                             width = this.pxToPt(bounds.width);
                             height = this.pxToPt(bounds.height);
                             canvas = document.createElement('canvas');
@@ -9445,13 +9338,10 @@ var CanvasRenderer$1 = /** @class */ (function (_super) {
                             canvas.height = container.intrinsicHeight || image.height;
                             ctx = canvas.getContext('2d');
                             if (ctx) {
-                                // 设置白色背景或保持透明
                                 ctx.clearRect(0, 0, canvas.width, canvas.height);
-                                // 绘制SVG图像
                                 ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
                                 dataURL = canvas.toDataURL('image/png');
-                                // 将 SVG 添加到 PDF
-                                this.jspdfCtx.addImage(dataURL, 'PNG', x, y, width, height);
+                                this.addImagePdf(dataURL, 'PNG', x, y, width, height);
                             }
                         }
                         catch (err) {
@@ -9463,42 +9353,11 @@ var CanvasRenderer$1 = /** @class */ (function (_super) {
                         this.context.logger.error("Error loading svg ".concat(e_2));
                         return [3 /*break*/, 12];
                     case 12:
-                        if (!(container instanceof IFrameElementContainer$1 && container.tree)) return [3 /*break*/, 14];
-                        iframeRenderer = new CanvasRenderer(this.context, {
-                            scale: this.options.scale,
-                            fontConfig: this.options.fontConfig,
-                            backgroundColor: container.backgroundColor,
-                            x: 0,
-                            y: 0,
-                            width: container.width,
-                            height: container.height
-                        });
-                        return [4 /*yield*/, iframeRenderer.render(container.tree)];
-                    case 13:
-                        canvas = _c.sent();
-                        if (container.width && container.height) {
-                            // this.ctx.drawImage(
-                            //     canvas,
-                            //     0,
-                            //     0,
-                            //     container.width,
-                            //     container.height,
-                            //     container.bounds.left,
-                            //     container.bounds.top,
-                            //     container.bounds.width,
-                            //     container.bounds.height
-                            // );
-                            this.context2dCtx.drawImage(canvas, 0, 0, container.width, container.height, container.bounds.left, container.bounds.top, container.bounds.width, container.bounds.height);
-                        }
-                        _c.label = 14;
-                    case 14:
-                        // 处理Input元素
+                        if (container instanceof IFrameElementContainer$1 && container.tree) ;
                         if (container instanceof InputElementContainer$1) {
                             size = Math.min(container.bounds.width, container.bounds.height);
-                            // 渲染复选框
                             if (container.type === CHECKBOX$1) {
                                 if (container.checked) {
-                                    // this.ctx.save();
                                     this.context2dCtx.save();
                                     this.path([
                                         new Vector$1(container.bounds.left + size * 0.39363, container.bounds.top + size * 0.79),
@@ -9509,9 +9368,6 @@ var CanvasRenderer$1 = /** @class */ (function (_super) {
                                         new Vector$1(container.bounds.left + size * 0.84, container.bounds.top + size * 0.34085),
                                         new Vector$1(container.bounds.left + size * 0.39363, container.bounds.top + size * 0.79)
                                     ]);
-                                    // this.ctx.fillStyle = this.convertColor(INPUT_COLOR);
-                                    // this.ctx.fill();
-                                    // this.ctx.restore();
                                     this.context2dCtx.fillStyle = this.convertColor(INPUT_COLOR$1);
                                     this.context2dCtx.fill();
                                     this.context2dCtx.restore();
@@ -9520,47 +9376,25 @@ var CanvasRenderer$1 = /** @class */ (function (_super) {
                                     }
                                 }
                             }
-                            // 渲染单选框
                             else if (container.type === RADIO$1) {
                                 if (container.checked) {
-                                    // this.ctx.save();
-                                    // this.ctx.beginPath();
-                                    // this.ctx.arc(
-                                    //     container.bounds.left + size / 2,
-                                    //     container.bounds.top + size / 2,
-                                    //     size / 4,
-                                    //     0,
-                                    //     Math.PI * 2,
-                                    //     true
-                                    // );
-                                    // this.ctx.fillStyle = this.convertColor(INPUT_COLOR);
-                                    // this.ctx.fill();
-                                    // this.ctx.restore();
                                     this.context2dCtx.save();
                                     this.context2dCtx.beginPath();
                                     this.context2dCtx.arc(container.bounds.left + size / 2, container.bounds.top + size / 2, size / 4, 0, Math.PI * 2, true);
                                     this.context2dCtx.fillStyle = this.convertColor(INPUT_COLOR$1);
                                     this.context2dCtx.fill();
                                     this.context2dCtx.restore();
-                                    // 在 restore 之后重新设置字体
                                 }
                             }
                         }
-                        // 处理文本输入元素
                         if (isTextInputElement$1(container) && container.value.length) {
                             _b = this.createFontStyle(styles), fontFamily = _b[0], fontSize = _b[1];
                             baseline = this.fontMetrics.getMetrics(fontFamily, fontSize).baseline;
-                            // this.ctx.font = fontFamily;
-                            // this.ctx.fillStyle = this.convertColor(styles.color);
-                            // this.context2dCtx.font = fontFamily;
                             this.context2dCtx.fillStyle = this.convertColor(styles.color);
-                            // this.ctx.textBaseline = 'alphabetic';
-                            // this.ctx.textAlign = canvasTextAlign(container.styles.textAlign);
                             this.context2dCtx.textBaseline = 'alphabetic';
                             this.context2dCtx.textAlign = canvasTextAlign$1(container.styles.textAlign);
                             bounds = contentBox$1(container);
                             x = 0;
-                            // 根据文本对齐方式调整x坐标
                             switch (container.styles.textAlign) {
                                 case 1 /* TEXT_ALIGN.CENTER */:
                                     x += bounds.width / 2;
@@ -9570,7 +9404,6 @@ var CanvasRenderer$1 = /** @class */ (function (_super) {
                                     break;
                             }
                             textBounds = bounds.add(x, 0, 0, -bounds.height / 2 + 1);
-                            // this.ctx.save();
                             this.context2dCtx.save();
                             this.path([
                                 new Vector$1(bounds.left, bounds.top),
@@ -9578,56 +9411,45 @@ var CanvasRenderer$1 = /** @class */ (function (_super) {
                                 new Vector$1(bounds.left + bounds.width, bounds.top + bounds.height),
                                 new Vector$1(bounds.left, bounds.top + bounds.height)
                             ]);
-                            // this.ctx.clip();
                             this.context2dCtx.clip();
                             this.renderTextWithLetterSpacing(new TextBounds$1(container.value, textBounds), styles.letterSpacing, baseline);
-                            // this.ctx.restore();
-                            // this.ctx.textBaseline = 'alphabetic';
-                            // this.ctx.textAlign = 'left';
                             this.context2dCtx.restore();
                             this.context2dCtx.textBaseline = 'alphabetic';
                             this.context2dCtx.textAlign = 'left';
                         }
-                        if (!contains$1(container.styles.display, 2048 /* DISPLAY.LIST_ITEM */)) return [3 /*break*/, 20];
-                        if (!(container.styles.listStyleImage !== null)) return [3 /*break*/, 19];
+                        if (!contains$1(container.styles.display, 2048 /* DISPLAY.LIST_ITEM */)) return [3 /*break*/, 18];
+                        if (!(container.styles.listStyleImage !== null)) return [3 /*break*/, 17];
                         img = container.styles.listStyleImage;
-                        if (!(img.type === 0 /* CSSImageType.URL */)) return [3 /*break*/, 18];
+                        if (!(img.type === 0 /* CSSImageType.URL */)) return [3 /*break*/, 16];
                         image = void 0;
                         url = img.url;
-                        _c.label = 15;
-                    case 15:
-                        _c.trys.push([15, 17, , 18]);
+                        _c.label = 13;
+                    case 13:
+                        _c.trys.push([13, 15, , 16]);
                         return [4 /*yield*/, this.context.cache.match(url)];
-                    case 16:
+                    case 14:
                         image = _c.sent();
-                        // this.ctx.drawImage(image, container.bounds.left - (image.width + 10), container.bounds.top);
                         this.context2dCtx.drawImage(image, container.bounds.left - (image.width + 10), container.bounds.top);
-                        return [3 /*break*/, 18];
-                    case 17:
+                        return [3 /*break*/, 16];
+                    case 15:
                         _c.sent();
                         this.context.logger.error("Error loading list-style-image ".concat(url));
-                        return [3 /*break*/, 18];
-                    case 18: return [3 /*break*/, 20];
-                    case 19:
+                        return [3 /*break*/, 16];
+                    case 16: return [3 /*break*/, 18];
+                    case 17:
                         if (paint.listValue && container.styles.listStyleType !== -1 /* LIST_STYLE_TYPE.NONE */) {
                             fontFamily = this.createFontStyle(styles)[0];
-                            // this.ctx.font = fontFamily;
-                            // this.ctx.fillStyle = this.convertColor(styles.color);
                             this.context2dCtx.font = fontFamily;
                             this.context2dCtx.fillStyle = this.convertColor(styles.color);
-                            // this.ctx.textBaseline = 'middle';
-                            // this.ctx.textAlign = 'right';
                             this.context2dCtx.textBaseline = 'middle';
                             this.context2dCtx.textAlign = 'right';
                             bounds = new Bounds$1(container.bounds.left, container.bounds.top + getAbsoluteValue$1(container.styles.paddingTop, container.bounds.width), container.bounds.width, computeLineHeight$1(styles.lineHeight, styles.fontSize.number) / 2 + 1);
                             this.renderTextWithLetterSpacing(new TextBounds$1(paint.listValue, bounds), styles.letterSpacing, computeLineHeight$1(styles.lineHeight, styles.fontSize.number) / 2 + 2);
-                            // this.ctx.textBaseline = 'bottom';
-                            // this.ctx.textAlign = 'left';
                             this.context2dCtx.textBaseline = 'bottom';
                             this.context2dCtx.textAlign = 'left';
                         }
-                        _c.label = 20;
-                    case 20:
+                        _c.label = 18;
+                    case 18:
                         if (this.options.fontConfig && this.options.fontConfig.fontFamily) {
                             this.jspdfCtx.setFont(this.options.fontConfig.fontFamily);
                         }
@@ -9636,7 +9458,6 @@ var CanvasRenderer$1 = /** @class */ (function (_super) {
             });
         });
     };
-    // 渲染堆叠上下文内容
     CanvasRenderer.prototype.renderStackContent = function (stack) {
         return __awaiter$1(this, void 0, void 0, function () {
             var _i, _a, child, _b, _c, child, _d, _e, child, _f, _g, child, _h, _j, child, _k, _l, child, _m, _o, child;
@@ -9646,12 +9467,8 @@ var CanvasRenderer$1 = /** @class */ (function (_super) {
                         if (contains$1(stack.element.container.flags, 16 /* FLAGS.DEBUG_RENDER */)) {
                             debugger;
                         }
-                        // https://www.w3.org/TR/css-position-3/#painting-order
-                        // 1. the background and borders of the element forming the stacking context.
                         return [4 /*yield*/, this.renderNodeBackgroundAndBorders(stack.element)];
                     case 1:
-                        // https://www.w3.org/TR/css-position-3/#painting-order
-                        // 1. the background and borders of the element forming the stacking context.
                         _p.sent();
                         _i = 0, _a = stack.negativeZIndex;
                         _p.label = 2;
@@ -9665,11 +9482,8 @@ var CanvasRenderer$1 = /** @class */ (function (_super) {
                     case 4:
                         _i++;
                         return [3 /*break*/, 2];
-                    case 5: 
-                    // 3. For all its in-flow, non-positioned, block-level descendants in tree order:
-                    return [4 /*yield*/, this.renderNodeContent(stack.element)];
+                    case 5: return [4 /*yield*/, this.renderNodeContent(stack.element)];
                     case 6:
-                        // 3. For all its in-flow, non-positioned, block-level descendants in tree order:
                         _p.sent();
                         _b = 0, _c = stack.nonInlineLevel;
                         _p.label = 7;
@@ -9753,16 +9567,7 @@ var CanvasRenderer$1 = /** @class */ (function (_super) {
             });
         });
     };
-    // 创建遮罩
     CanvasRenderer.prototype.mask = function (paths) {
-        // this.ctx.beginPath();
-        // this.ctx.moveTo(0, 0);
-        // this.ctx.lineTo(this.canvas.width, 0);
-        // this.ctx.lineTo(this.canvas.width, this.canvas.height);
-        // this.ctx.lineTo(0, this.canvas.height);
-        // this.ctx.lineTo(0, 0);
-        // this.formatPath(paths.slice(0).reverse());
-        // this.ctx.closePath();
         this.context2dCtx.beginPath();
         this.context2dCtx.moveTo(0, 0);
         this.context2dCtx.lineTo(this.options.width, 0);
@@ -9772,54 +9577,33 @@ var CanvasRenderer$1 = /** @class */ (function (_super) {
         this.formatPath(paths.slice(0).reverse());
         this.context2dCtx.closePath();
     };
-    // 创建路径
     CanvasRenderer.prototype.path = function (paths) {
-        // this.ctx.beginPath();
-        // this.formatPath(paths);
-        // this.ctx.closePath();
         this.context2dCtx.beginPath();
         this.formatPath(paths);
         this.context2dCtx.closePath();
     };
-    // 格式化路径
     CanvasRenderer.prototype.formatPath = function (paths) {
         var _this = this;
         paths.forEach(function (point, index) {
             var start = isBezierCurve$1(point) ? point.start : point;
             if (index === 0) {
-                // this.ctx.moveTo(start.x, start.y);
                 _this.context2dCtx.moveTo(start.x, start.y);
             }
             else {
-                // this.ctx.lineTo(start.x, start.y);
                 _this.context2dCtx.lineTo(start.x, start.y);
             }
             if (isBezierCurve$1(point)) {
-                // this.ctx.bezierCurveTo(
-                //     point.startControl.x,
-                //     point.startControl.y,
-                //     point.endControl.x,
-                //     point.endControl.y,
-                //     point.end.x,
-                //     point.end.y
-                // );
                 _this.context2dCtx.bezierCurveTo(point.startControl.x, point.startControl.y, point.endControl.x, point.endControl.y, point.end.x, point.end.y);
             }
         });
     };
-    // 渲染重复图案
     CanvasRenderer.prototype.renderRepeat = function (path, pattern, offsetX, offsetY) {
         this.path(path);
         this.ctx.fillStyle = pattern;
-        // this.ctx.translate(offsetX, offsetY);
-        // this.ctx.fill();
-        // this.ctx.translate(-offsetX, -offsetY);
-        //    this.context2dCtx.fillStyle =this.convertColor(pattern) ;
         this.context2dCtx.translate(offsetX, offsetY);
         this.context2dCtx.fill();
         this.context2dCtx.translate(-offsetX, -offsetY);
     };
-    // 调整图片大小
     CanvasRenderer.prototype.resizeImage = function (image, width, height) {
         var _a;
         if (image.width === width && image.height === height) {
@@ -9833,7 +9617,6 @@ var CanvasRenderer$1 = /** @class */ (function (_super) {
         ctx.drawImage(image, 0, 0, image.width, image.height, 0, 0, width, height);
         return canvas;
     };
-    // 渲染背景图片
     CanvasRenderer.prototype.renderBackgroundImage = function (container) {
         return __awaiter$1(this, void 0, void 0, function () {
             var index, _i, _a, backgroundImage, image, url, _b, path, x, y, width, height, pattern, xPt, yPt, widthPt, heightPt;
@@ -9844,7 +9627,7 @@ var CanvasRenderer$1 = /** @class */ (function (_super) {
                         _i = 0, _a = container.styles.backgroundImage.slice(0).reverse();
                         _c.label = 1;
                     case 1:
-                        if (!(_i < _a.length)) return [3 /*break*/, 9];
+                        if (!(_i < _a.length)) return [3 /*break*/, 8];
                         backgroundImage = _a[_i];
                         if (!(backgroundImage.type === 0 /* CSSImageType.URL */)) return [3 /*break*/, 6];
                         image = void 0;
@@ -9869,55 +9652,35 @@ var CanvasRenderer$1 = /** @class */ (function (_super) {
                             ]), path = _b[0], x = _b[1], y = _b[2], width = _b[3], height = _b[4];
                             pattern = this.ctx.createPattern(this.resizeImage(image, width, height), 'repeat');
                             this.renderRepeat(path, pattern, x, y);
-                            xPt = this.pxToPt(x);
-                            yPt = this.pxToPt(y);
+                            xPt = this.pxToPt(x - this.options.x);
+                            yPt = this.pxToPt(y - this.options.y);
                             widthPt = this.pxToPt(width);
                             heightPt = this.pxToPt(height);
-                            // console.log('绘制背景图片', xPt, yPt, image)
-                            this.jspdfCtx.addImage(image, 'JPEG', xPt, yPt, widthPt, heightPt);
+                            this.addImagePdf(image, 'JPEG', xPt, yPt, widthPt, heightPt);
                         }
-                        return [3 /*break*/, 7];
+                        _c.label = 6;
                     case 6:
-                        if (isLinearGradient$1(backgroundImage)) ;
-                        else if (isRadialGradient$1(backgroundImage)) ;
+                        index--;
                         _c.label = 7;
                     case 7:
-                        index--;
-                        _c.label = 8;
-                    case 8:
                         _i++;
                         return [3 /*break*/, 1];
-                    case 9: return [2 /*return*/];
+                    case 8: return [2 /*return*/];
                 }
             });
         });
     };
-    /**
-     * 渲染实线边框
-     * @param color - 边框颜色
-     * @param side - 边的位置(0-3,分别代表上右下左)
-     * @param curvePoints - 边框曲线点
-     */
     CanvasRenderer.prototype.renderSolidBorder = function (color, side, curvePoints) {
         return __awaiter$1(this, void 0, void 0, function () {
             return __generator$1(this, function (_a) {
-                // console.log('绘制边框')
-                // 解析边框路径
-                // console.log('Border curve points:', JSON.stringify(curvePoints));
-                // console.log('Page height:', this.jspdf.internal.pageSize.height);
                 this.path(parsePathForBorder$1(curvePoints, side));
-                // 设置填充颜色
-                // this.ctx.fillStyle = this.convertColor(color);
                 this.context2dCtx.fillStyle = this.convertColor(color);
-                // 填充路径
-                // this.ctx.fill();
                 this.jspdfCtx.fill();
                 this.context2dCtx.fill();
                 return [2 /*return*/];
             });
         });
     };
-    // 渲染双线边框
     CanvasRenderer.prototype.renderDoubleBorder = function (color, width, side, curvePoints) {
         return __awaiter$1(this, void 0, void 0, function () {
             var outerPaths, innerPaths;
@@ -9932,27 +9695,22 @@ var CanvasRenderer$1 = /** @class */ (function (_super) {
                     case 2:
                         outerPaths = parsePathForBorderDoubleOuter$1(curvePoints, side);
                         this.path(outerPaths);
-                        // this.ctx.fillStyle = this.convertColor(color);
-                        // this.ctx.fill();
                         this.context2dCtx.fillStyle = this.convertColor(color);
                         this.context2dCtx.fill();
                         innerPaths = parsePathForBorderDoubleInner$1(curvePoints, side);
                         this.path(innerPaths);
-                        // this.ctx.fill();
                         this.context2dCtx.fill();
                         return [2 /*return*/];
                 }
             });
         });
     };
-    // 渲染节点的背景和边框
     CanvasRenderer.prototype.renderNodeBackgroundAndBorders = function (paint) {
         return __awaiter$1(this, void 0, void 0, function () {
             var styles, hasBackground, borders, backgroundPaintingArea, foreignobjectrendering, side, _i, borders_1, border;
             return __generator$1(this, function (_a) {
                 switch (_a.label) {
                     case 0:
-                        // 应用背景和边框的效果
                         this.applyEffects(paint.getEffects(2 /* EffectTarget.BACKGROUND_BORDERS */));
                         styles = paint.container.styles;
                         hasBackground = !isTransparent$1(styles.backgroundColor) || styles.backgroundImage.length;
@@ -9965,8 +9723,6 @@ var CanvasRenderer$1 = /** @class */ (function (_super) {
                         backgroundPaintingArea = calculateBackgroundCurvedPaintingArea$1(getBackgroundValueForIndex$1(styles.backgroundClip, 0), paint.curves);
                         foreignobjectrendering = paint.container.foreignobjectrendering;
                         if (!(hasBackground || styles.boxShadow.length)) return [3 /*break*/, 2];
-                        // console.log(paint,foreignobjectrendering, 'paint边框')
-                        // 在 save 之前确保字体设置正确
                         if (this.options.fontConfig && this.options.fontConfig.fontFamily) {
                             this.jspdfCtx.setFont(this.options.fontConfig.fontFamily);
                         }
@@ -9974,12 +9730,7 @@ var CanvasRenderer$1 = /** @class */ (function (_super) {
                             this.context2dCtx.save();
                             this.path(backgroundPaintingArea);
                             this.context2dCtx.clip();
-                            // this.ctx.save();
-                            // this.path(backgroundPaintingArea);
-                            // this.ctx.clip();
                             if (!isTransparent$1(styles.backgroundColor)) {
-                                // this.ctx.fillStyle = asString(styles.backgroundColor);
-                                // this.ctx.fill();
                                 this.context2dCtx.fillStyle = this.convertColor(styles.backgroundColor);
                                 this.context2dCtx.fill();
                             }
@@ -9987,9 +9738,7 @@ var CanvasRenderer$1 = /** @class */ (function (_super) {
                         return [4 /*yield*/, this.renderBackgroundImage(paint.container)];
                     case 1:
                         _a.sent();
-                        // this.ctx.restore();
                         this.context2dCtx.restore();
-                        // 在 restore 之后重新设置字体
                         if (this.options.fontConfig && this.options.fontConfig.fontFamily) {
                             this.jspdfCtx.setFont(this.options.fontConfig.fontFamily);
                         }
@@ -10036,27 +9785,15 @@ var CanvasRenderer$1 = /** @class */ (function (_super) {
             });
         });
     };
-    // 这个方法用于渲染虚线和点线边框
-    CanvasRenderer.prototype.renderDashedDottedBorder = function (color, // 边框颜色
-    width, // 边框宽度
-    side, // 边的位置(0-3,分别代表上右下左)
-    curvePoints, // 边框曲线点
-    style // 边框样式(DASHED或DOTTED)
-    ) {
+    CanvasRenderer.prototype.renderDashedDottedBorder = function (color, width, side, curvePoints, style) {
         return __awaiter$1(this, void 0, void 0, function () {
             var strokePaths, boxPaths, startX, startY, endX, endY, length, dashLength, spaceLength, useLineDash, multiplier, numberOfDashes, minSpace, maxSpace, path1, path2, x1, y1, x2, y2, path1, path2;
             return __generator$1(this, function (_a) {
-                // this.ctx.save();  // 保存当前画布状态
-                // this.jspdfCtx.saveGraphicsState(); // 保存PDF绘图状态
                 this.context2dCtx.save();
                 strokePaths = parsePathForBorderStroke$1(curvePoints, side);
                 boxPaths = parsePathForBorder$1(curvePoints, side);
-                // 如果是虚线边框,需要先裁剪路径
                 if (style === 2 /* BORDER_STYLE.DASHED */) {
                     this.path(boxPaths);
-                    // this.ctx.clip();
-                    // // PDF裁剪路径
-                    // this.jspdfCtx.clip();
                     this.context2dCtx.clip();
                 }
                 if (isBezierCurve$1(boxPaths[0])) {
@@ -10081,10 +9818,8 @@ var CanvasRenderer$1 = /** @class */ (function (_super) {
                 else {
                     length = Math.abs(startY - endY);
                 }
-                // 开始绘制路径
-                // this.ctx.beginPath();
                 this.context2dCtx.beginPath();
-                this.jspdfCtx.setDrawColor(this.convertColor(color)); // 设置PDF绘制颜色
+                this.jspdfCtx.setDrawColor(this.convertColor(color));
                 if (style === 3 /* BORDER_STYLE.DOTTED */) {
                     this.formatPath(strokePaths);
                 }
@@ -10115,34 +9850,23 @@ var CanvasRenderer$1 = /** @class */ (function (_super) {
                             ? minSpace
                             : maxSpace;
                 }
-                // 设置虚线样式
                 if (useLineDash) {
                     if (style === 3 /* BORDER_STYLE.DOTTED */) {
-                        // this.ctx.setLineDash([0, dashLength + spaceLength]);
-                        this.jspdfCtx.setLineDashPattern([0, dashLength + spaceLength], 0); // PDF虚线样式
+                        this.jspdfCtx.setLineDashPattern([0, dashLength + spaceLength], 0);
                     }
                     else {
-                        // this.ctx.setLineDash([dashLength, spaceLength]);
-                        this.jspdfCtx.setLineDashPattern([dashLength, spaceLength], 0); // PDF虚线样式
+                        this.jspdfCtx.setLineDashPattern([dashLength, spaceLength], 0);
                     }
                 }
-                // 设置线条样式并绘制
                 if (style === 3 /* BORDER_STYLE.DOTTED */) {
-                    // this.ctx.lineCap = 'round';
-                    // this.ctx.lineWidth = width;
-                    this.jspdfCtx.setLineCap('round'); // PDF线帽样式
+                    this.jspdfCtx.setLineCap('round');
                     this.jspdfCtx.setLineWidth(width);
                 }
                 else {
-                    // this.ctx.lineWidth = width * 2 + 1.1;
                     this.jspdfCtx.setLineWidth(width * 2 + 1.1);
                 }
-                // this.ctx.strokeStyle = this.convertColor(color);
-                // this.ctx.stroke();
-                this.jspdfCtx.stroke(); // PDF绘制线条
-                // this.ctx.setLineDash([]);
-                this.jspdfCtx.setLineDashPattern([], 0); // 重置PDF虚线样式
-                // 处理虚线边框的圆角连接处
+                this.jspdfCtx.stroke();
+                this.jspdfCtx.setLineDashPattern([], 0);
                 if (style === 2 /* BORDER_STYLE.DASHED */) {
                     if (isBezierCurve$1(boxPaths[0])) {
                         path1 = boxPaths[3];
@@ -10162,42 +9886,189 @@ var CanvasRenderer$1 = /** @class */ (function (_super) {
                     if (isBezierCurve$1(boxPaths[1])) {
                         path1 = boxPaths[1];
                         path2 = boxPaths[2];
-                        // this.ctx.beginPath();
-                        // this.formatPath([new Vector(path1.end.x, path1.end.y), new Vector(path2.start.x, path2.start.y)]);
-                        // this.ctx.stroke();
-                        this.jspdfCtx.lines([[path1.end.x, path1.end.y, path2.start.x, path2.start.y]], path1.end.x, path1.end.y); // PDF绘制连接线
+                        this.jspdfCtx.lines([[path1.end.x, path1.end.y, path2.start.x, path2.start.y]], path1.end.x, path1.end.y);
                         this.jspdfCtx.stroke();
                     }
                 }
-                // this.ctx.restore(); // 恢复画布状态
-                this.jspdfCtx.restoreGraphicsState(); // 恢复PDF绘图状态
+                this.jspdfCtx.restoreGraphicsState();
+                return [2 /*return*/];
+            });
+        });
+    };
+    CanvasRenderer.prototype.addPage = function (offsetY) {
+        return __awaiter$1(this, void 0, void 0, function () {
+            return __generator$1(this, function (_a) {
+                this.context2dCtx.translate(0, -offsetY);
+                this.jspdfCtx.addPage();
                 return [2 /*return*/];
             });
         });
     };
-    CanvasRenderer.prototype.render = function (element) {
+    CanvasRenderer.prototype.renderPage = function (element, pageNum) {
         return __awaiter$1(this, void 0, void 0, function () {
-            var stack, pdfBlob;
+            var cfg, pageW, pageH, mt, mb, bx, by, bw, bh, stack, headerText, headerPos, footerText, footerPos;
             return __generator$1(this, function (_a) {
                 switch (_a.label) {
                     case 0:
+                        cfg = this.options.pageConfig;
+                        pageW = this.jspdfCtx.internal.pageSize.getWidth();
+                        pageH = this.jspdfCtx.internal.pageSize.getHeight();
+                        mt = 0;
+                        mb = 0;
                         if (this.options.backgroundColor) {
-                            // this.ctx.fillStyle = this.convertColor(this.options.backgroundColor);
-                            // this.ctx.fillRect(this.options.x, this.options.y, this.options.width, this.options.height);
-                            this.jspdfCtx.setFillColor(this.convertColor(this.options.backgroundColor)); // PDF填充背景颜色
-                            this.jspdfCtx.rect(this.options.x, this.options.y, this.options.width, this.options.height, 'F'); // PDF绘制矩形
+                            this.jspdfCtx.setFillColor(this.convertColor(this.options.backgroundColor));
+                            bx = this.safe(this.options.x);
+                            by = this.safe(this.options.y);
+                            bw = Math.max(1, this.safe(this.options.width, 1));
+                            bh = Math.max(1, this.safe(this.options.height, 1));
+                            this.jspdfCtx.rect(bx, by, bw, bh, 'F');
                         }
                         stack = parseStackingContexts$1(element);
                         return [4 /*yield*/, this.renderStack(stack)];
                     case 1:
                         _a.sent();
                         this.applyEffects([]);
-                        pdfBlob = this.jspdfCtx.output('blob');
-                        return [2 /*return*/, pdfBlob];
+                        if (cfg === null || cfg === void 0 ? void 0 : cfg.header) {
+                            headerText = String(cfg.header.content)
+                                .replace('${currentPage}', String(pageNum))
+                                .replace('${totalPages}', String(this.totalPages));
+                            this.jspdfCtx.setFontSize(this.safe(this.pxToPt(cfg.header.contentFontSize), 1));
+                            this.setTextColorFromString(cfg.header.contentColor);
+                            headerPos = this.computeContentPosition(cfg.header.contentPosition, pageW, pageH, cfg.header.height, mt, mb, 'header', cfg.header.padding);
+                            this.textPdf(headerText, headerPos.x, headerPos.y, headerPos.align);
+                        }
+                        if (cfg === null || cfg === void 0 ? void 0 : cfg.footer) {
+                            footerText = String(cfg.footer.content)
+                                .replace('${currentPage}', String(pageNum))
+                                .replace('${totalPages}', String(this.totalPages));
+                            this.jspdfCtx.setFontSize(this.safe(this.pxToPt(cfg.footer.contentFontSize), 1));
+                            this.setTextColorFromString(cfg.footer.contentColor);
+                            footerPos = this.computeContentPosition(cfg.footer.contentPosition, pageW, pageH, cfg.footer.height, mt, mb, 'footer', cfg.footer.padding);
+                            this.textPdf(footerText, footerPos.x, footerPos.y, footerPos.align);
+                        }
+                        return [2 /*return*/];
                 }
             });
         });
     };
+    CanvasRenderer.prototype.setTotalPages = function (total) {
+        this.totalPages = total;
+    };
+    CanvasRenderer.prototype.setTextColorFromString = function (color) {
+        var _a;
+        var named = {
+            black: [0, 0, 0],
+            white: [255, 255, 255],
+            red: [255, 0, 0],
+            green: [0, 128, 0],
+            blue: [0, 0, 255],
+            gray: [128, 128, 128]
+        };
+        var r = 0, g = 0, b = 0;
+        var c = (color === null || color === void 0 ? void 0 : color.toLowerCase()) || 'black';
+        if (c in named) {
+            _a = named[c], r = _a[0], g = _a[1], b = _a[2];
+        }
+        else if (c.startsWith('#') && (c.length === 7 || c.length === 4)) {
+            var hex = c.length === 4 ? "#".concat(c[1]).concat(c[1]).concat(c[2]).concat(c[2]).concat(c[3]).concat(c[3]) : c;
+            r = parseInt(hex.slice(1, 3), 16);
+            g = parseInt(hex.slice(3, 5), 16);
+            b = parseInt(hex.slice(5, 7), 16);
+        }
+        this.jspdfCtx.setTextColor(r, g, b);
+    };
+    CanvasRenderer.prototype.safe = function (n, min) {
+        if (min === void 0) { min = 0; }
+        var v = Number(n);
+        return Number.isFinite(v) ? v : min;
+    };
+    CanvasRenderer.prototype.textPdf = function (text, x, y, align) {
+        var sx = this.safe(x);
+        var sy = this.safe(y);
+        this.jspdfCtx.text(String(text), sx, sy, { align: align });
+    };
+    CanvasRenderer.prototype.computeContentPosition = function (pos, pageW, pageH, areaH, mt, mb, area, paddingPx) {
+        var _this = this;
+        var _a = (paddingPx !== null && paddingPx !== void 0 ? paddingPx : [24, 24, 24, 24]).map(function (v) { return _this.pxToPt(v); }), pt = _a[0], pr = _a[1], pb = _a[2], pl = _a[3];
+        var areaHPt = this.pxToPt(areaH);
+        var mtPt = this.pxToPt(mt);
+        var mbPt = this.pxToPt(mb);
+        if (Array.isArray(pos) && pos.length >= 2) {
+            return { x: this.pxToPt(pos[0]), y: this.pxToPt(pos[1]), align: 'left' };
+        }
+        if (area === 'header') {
+            switch (pos) {
+                case 'center':
+                    return {
+                        x: pageW / 2,
+                        y: mtPt + pt + (areaHPt - pt - pb) / 2,
+                        align: 'center'
+                    };
+                case 'centerLeft':
+                    return { x: pl, y: mtPt + pt + (areaHPt - pt - pb) / 2, align: 'left' };
+                case 'centerRight':
+                    return { x: pageW - pr, y: mtPt + pt + (areaHPt - pt - pb) / 2, align: 'right' };
+                case 'centerTop':
+                    return { x: pageW / 2, y: mtPt + pt, align: 'center' };
+                case 'centerBottom':
+                    return { x: pageW / 2, y: mtPt + areaHPt - pb, align: 'center' };
+                case 'leftTop':
+                    return { x: pl, y: mtPt + pt, align: 'left' };
+                case 'leftBottom':
+                    return { x: pl, y: mtPt + areaHPt - pb, align: 'left' };
+                case 'rightTop':
+                    return { x: pageW - pr, y: mtPt + pt, align: 'right' };
+                case 'rightBottom':
+                    return { x: pageW - pr, y: mtPt + areaHPt - pb, align: 'right' };
+                default:
+                    return { x: pl, y: mtPt + pt, align: 'left' };
+            }
+        }
+        else {
+            switch (pos) {
+                case 'center':
+                    return {
+                        x: pageW / 2,
+                        y: pageH - mbPt - areaHPt + pt + (areaHPt - pt - pb) / 2,
+                        align: 'center'
+                    };
+                case 'centerLeft':
+                    return { x: pl, y: pageH - mbPt - areaHPt + pt + (areaHPt - pt - pb) / 2, align: 'left' };
+                case 'centerRight':
+                    return { x: pageW - pr, y: pageH - mbPt - areaHPt + pt + (areaHPt - pt - pb) / 2, align: 'right' };
+                case 'centerTop':
+                    return { x: pageW / 2, y: pageH - mbPt - areaHPt + pt, align: 'center' };
+                case 'centerBottom':
+                    return { x: pageW / 2, y: pageH - mbPt - pb, align: 'center' };
+                case 'leftTop':
+                    return { x: pl, y: pageH - mbPt - areaHPt + pt, align: 'left' };
+                case 'leftBottom':
+                    return { x: pl, y: pageH - mbPt - pb, align: 'left' };
+                case 'rightTop':
+                    return { x: pageW - pr, y: pageH - mbPt - areaHPt + pt, align: 'right' };
+                case 'rightBottom':
+                    return { x: pageW - pr, y: pageH - mbPt - pb, align: 'right' };
+                default:
+                    return { x: pl, y: pageH - mbPt - pb, align: 'left' };
+            }
+        }
+    };
+    CanvasRenderer.prototype.addImagePdf = function (img, format, x, y, w, h) {
+        var sx = this.safe(x);
+        var sy = this.safe(y);
+        var sw = Math.max(1, this.safe(w, 1));
+        var sh = Math.max(1, this.safe(h, 1));
+        this.jspdfCtx.addImage(img, format, sx, sy, sw, sh);
+    };
+    CanvasRenderer.prototype.output = function () {
+        return __awaiter$1(this, void 0, void 0, function () {
+            var pdfBlob;
+            return __generator$1(this, function (_a) {
+                pdfBlob = this.jspdfCtx.output('blob');
+                return [2 /*return*/, pdfBlob];
+            });
+        });
+    };
     return CanvasRenderer;
 }(Renderer$1));
 var isTextInputElement$1 = function (container) {
@@ -10242,19 +10113,258 @@ var fixIOSSystemFonts$1 = function (fontFamilies) {
         : fontFamilies;
 };
 
+// 96 DPI pixel values
+var PAGE_FORMAT_MAP = {
+    // A Series
+    a0: { width: 3179, height: 4494 },
+    a1: { width: 2245, height: 3179 },
+    a2: { width: 1587, height: 2245 },
+    a3: { width: 1123, height: 1587 },
+    a4: { width: 794, height: 1123 },
+    a5: { width: 559, height: 794 },
+    a6: { width: 397, height: 559 },
+    a7: { width: 280, height: 397 },
+    a8: { width: 197, height: 280 },
+    a9: { width: 140, height: 197 },
+    a10: { width: 98, height: 140 },
+    // B Series
+    b0: { width: 3780, height: 5344 },
+    b1: { width: 2672, height: 3780 },
+    b2: { width: 1890, height: 2672 },
+    b3: { width: 1334, height: 1890 },
+    b4: { width: 945, height: 1334 },
+    b5: { width: 665, height: 945 },
+    b6: { width: 472, height: 665 },
+    b7: { width: 333, height: 472 },
+    b8: { width: 234, height: 333 },
+    b9: { width: 166, height: 234 },
+    b10: { width: 117, height: 166 },
+    // C Series
+    c0: { width: 3466, height: 4902 },
+    c1: { width: 2449, height: 3466 },
+    c2: { width: 1731, height: 2449 },
+    c3: { width: 1225, height: 1731 },
+    c4: { width: 865, height: 1225 },
+    c5: { width: 612, height: 865 },
+    c6: { width: 431, height: 612 },
+    c7: { width: 306, height: 431 },
+    c8: { width: 215, height: 306 },
+    c9: { width: 151, height: 215 },
+    c10: { width: 106, height: 151 },
+    // Others
+    dl: { width: 416, height: 832 },
+    letter: { width: 816, height: 1056 },
+    'government-letter': { width: 768, height: 1008 },
+    legal: { width: 816, height: 1344 },
+    'junior-legal': { width: 480, height: 768 },
+    ledger: { width: 1632, height: 1056 },
+    tabloid: { width: 1056, height: 1632 },
+    'credit-card': { width: 204, height: 324 },
+    // Aliases / Compatibility
+    A4: { width: 794, height: 1123 }
+};
+
+var offSetPageObj = {};
+var offSetTotal = 0;
+var activePageHeight = 1123;
+var pageMarginTop = 0;
+var pageMarginBottom = 0;
+var cloneContainerShallow = function (src) {
+    var c = Object.create(Object.getPrototypeOf(src));
+    var srcObj = src;
+    for (var _i = 0, _a = Object.keys(srcObj); _i < _a.length; _i++) {
+        var key = _a[_i];
+        if (key === 'elements' || key === 'bounds' || key === 'styles' || key === 'textNodes')
+            continue;
+        c[key] = srcObj[key];
+    }
+    c.context = src.context;
+    c.styles = Object.assign(Object.create(Object.getPrototypeOf(src.styles)), src.styles);
+    c.textNodes = src.textNodes;
+    c.flags = src.flags;
+    c.bounds = new Bounds$1(src.bounds.left, src.bounds.top, src.bounds.width, src.bounds.height);
+    c.elements = [];
+    return c;
+};
+var cloneTextContainerShallow = function (src) {
+    var c = Object.create(Object.getPrototypeOf(src));
+    c.text = src.text;
+    c.textBounds = [];
+    return c;
+};
+var computeMaxBottom = function (node) {
+    var maxBottom = node.bounds.top + node.bounds.height;
+    for (var _i = 0, _a = node.textNodes; _i < _a.length; _i++) {
+        var tn = _a[_i];
+        for (var _b = 0, _c = tn.textBounds; _b < _c.length; _b++) {
+            var tb = _c[_b];
+            var b = tb.bounds.top + tb.bounds.height;
+            if (b > maxBottom)
+                maxBottom = b;
+        }
+    }
+    for (var _d = 0, _e = node.elements; _d < _e.length; _d++) {
+        var el = _e[_d];
+        var b = computeMaxBottom(el);
+        if (b > maxBottom)
+            maxBottom = b;
+    }
+    return maxBottom;
+};
+var filterTextNodesForPage = function (container, pageStart, pageEnd) {
+    var result = [];
+    for (var _i = 0, _a = container.textNodes; _i < _a.length; _i++) {
+        var tc = _a[_i];
+        var filtered = [];
+        for (var _b = 0, _c = tc.textBounds; _b < _c.length; _b++) {
+            var tb = _c[_b];
+            var pageIndex = Math.floor(pageEnd / activePageHeight);
+            var maxKey = Math.max.apply(Math, Object.keys(offSetPageObj).map(function (k) { return +k; }));
+            var activePageOffset = offSetPageObj[maxKey] || 0;
+            var top_1 = tb.bounds.top + activePageOffset;
+            var bottom = tb.bounds.top + tb.bounds.height + activePageOffset;
+            var intersects = bottom > pageStart && top_1 < pageEnd;
+            var crossesToNextPage = bottom > pageEnd;
+            if (intersects && !crossesToNextPage) {
+                var offsetNum = 0;
+                if (top_1 < pageStart) {
+                    offsetNum = pageStart - top_1;
+                    if (!offSetPageObj[pageIndex] ||
+                        (offSetPageObj[pageIndex] && offSetPageObj[pageIndex] < offsetNum)) {
+                        if (offSetPageObj[pageIndex] && offSetPageObj[pageIndex] < offsetNum) {
+                            offSetTotal = offSetTotal - offSetPageObj[pageIndex] + offsetNum;
+                        }
+                        else {
+                            offSetTotal += offsetNum;
+                        }
+                        offSetPageObj[pageIndex] = offSetTotal;
+                    }
+                }
+                var visibleTop = Math.max(top_1, pageStart);
+                var visibleBottom = Math.min(bottom, pageEnd);
+                var newTop = visibleTop - pageStart;
+                var newHeight = Math.max(0, visibleBottom - visibleTop);
+                // 根据可见区域生成新的 Bounds
+                var nb = new Bounds$1(tb.bounds.left, newTop + pageMarginTop, tb.bounds.width, newHeight);
+                // if (pageIndex == 3) {
+                //     console.log(
+                //         'nb',
+                //         nb,
+                //         'pageStart',
+                //         pageStart,
+                //         'tb.bounds.top',
+                //         tb.bounds.top,
+                //         'activePageOffset',
+                //         activePageOffset,
+                //         (tb as any).text
+                //     );
+                // }
+                // 把文字内容和新的 bounds 一起放进 filtered
+                filtered.push({ text: tb.text, bounds: nb });
+            }
+        }
+        if (filtered.length > 0) {
+            var clone = cloneTextContainerShallow(tc);
+            clone.textBounds = filtered;
+            result.push(clone);
+        }
+    }
+    return result;
+};
+var filterElementForPage = function (container, pageStart, pageEnd) {
+    var pageIndex = Math.floor(pageEnd / activePageHeight);
+    var maxKey = Math.max.apply(Math, Object.keys(offSetPageObj).map(function (k) { return +k; }));
+    var activePageOffset = offSetPageObj[maxKey] || 0;
+    var top = container.bounds.top + activePageOffset;
+    var bottom = container.bounds.top + container.bounds.height + activePageOffset;
+    if (container.divisionDisable && bottom > pageEnd && top < pageEnd) {
+        var offsetNum = pageEnd - top;
+        var prev = offSetPageObj[pageIndex] || 0;
+        if (!offSetPageObj[pageIndex] || prev < offsetNum) {
+            offSetTotal += offsetNum - prev;
+            offSetPageObj[pageIndex] = offSetTotal;
+        }
+        return null;
+    }
+    var children = [];
+    for (var _i = 0, _a = container.elements; _i < _a.length; _i++) {
+        var child = _a[_i];
+        var part = filterElementForPage(child, pageStart, pageEnd);
+        if (part)
+            children.push(part);
+    }
+    var textNodes = filterTextNodesForPage(container, pageStart, pageEnd);
+    var visibleTop = Math.max(top, pageStart);
+    var visibleBottom = Math.min(bottom, pageEnd);
+    var newHeight = Math.max(0, visibleBottom - visibleTop);
+    var hasContent = children.length > 0 || textNodes.length > 0 || newHeight > 0;
+    if (!hasContent)
+        return null;
+    var clone = cloneContainerShallow(container);
+    clone.elements = children;
+    clone.textNodes = textNodes;
+    var newTop = visibleTop >= pageStart ? visibleTop - pageStart : 0;
+    clone.bounds = new Bounds$1(container.bounds.left, newTop + pageMarginTop, container.bounds.width, newHeight);
+    return clone;
+};
+var paginateNode = function (root, pageHeight, initialOffset, pageConfig) {
+    var _a, _b;
+    if (initialOffset === void 0) { initialOffset = 0; }
+    if (initialOffset < 0)
+        initialOffset = 0;
+    offSetTotal = 0;
+    Object.keys(offSetPageObj).forEach(function (key) { return delete offSetPageObj[key]; });
+    var maxBottom = computeMaxBottom(root);
+    pageMarginTop = ((_a = pageConfig === null || pageConfig === void 0 ? void 0 : pageConfig.header) === null || _a === void 0 ? void 0 : _a.height) || 0;
+    pageMarginBottom = ((_b = pageConfig === null || pageConfig === void 0 ? void 0 : pageConfig.footer) === null || _b === void 0 ? void 0 : _b.height) || 0;
+    activePageHeight = pageHeight - pageMarginTop - pageMarginBottom;
+    var totalPages = Math.max(1, Math.ceil((maxBottom - initialOffset) / activePageHeight));
+    var pages = [];
+    for (var i = 0; i < totalPages; i++) {
+        var pageStart = initialOffset + i * activePageHeight;
+        var pageEnd = pageStart + activePageHeight;
+        var pageRoot = filterElementForPage(root, pageStart, pageEnd);
+        if (pageRoot)
+            pages.push(pageRoot);
+    }
+    // console.log(offSetPageObj, '偏移量');
+    return pages;
+};
+
 var dompdf = function (element, options) {
-    // 移除元素的边框和阴影样式
     if (options === void 0) { options = {}; }
     return renderElement$1(element, options);
 };
 if (typeof window !== 'undefined') {
     CacheStorage$1.setContext(window);
 }
+var parseBackgroundColor$1 = function (context, element, backgroundColorOverride) {
+    var ownerDocument = element.ownerDocument;
+    // http://www.w3.org/TR/css3-background/#special-backgrounds
+    var documentBackgroundColor = ownerDocument.documentElement
+        ? parseColor$1(context, getComputedStyle(ownerDocument.documentElement).backgroundColor)
+        : COLORS$1.TRANSPARENT;
+    var bodyBackgroundColor = ownerDocument.body
+        ? parseColor$1(context, getComputedStyle(ownerDocument.body).backgroundColor)
+        : COLORS$1.TRANSPARENT;
+    var defaultBackgroundColor = typeof backgroundColorOverride === 'string'
+        ? parseColor$1(context, backgroundColorOverride)
+        : backgroundColorOverride === null
+            ? COLORS$1.TRANSPARENT
+            : 0xffffffff;
+    return element === ownerDocument.documentElement
+        ? isTransparent$1(documentBackgroundColor)
+            ? isTransparent$1(bodyBackgroundColor)
+                ? defaultBackgroundColor
+                : bodyBackgroundColor
+            : documentBackgroundColor
+        : defaultBackgroundColor;
+};
 var renderElement$1 = function (element, opts) { return __awaiter$1(void 0, void 0, void 0, function () {
-    var ownerDocument, defaultView, resourceOptions, contextOptions, windowOptions, windowBounds, context, foreignObjectRendering, cloneOptions, documentCloner, clonedElement, container, _a, width, height, left, top, backgroundColor, renderOptions, canvas, renderer, root, renderer;
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
-    return __generator$1(this, function (_v) {
-        switch (_v.label) {
+    var ownerDocument, defaultView, resourceOptions, contextOptions, windowOptions, windowBounds, context, foreignObjectRendering, cloneOptions, documentCloner, clonedElement, container, _a, width, height, left, top, backgroundColor, renderOptions, canvas, renderer, root, pageHeight, offsetY, adjustTop_1, pageRoots, renderer, i;
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1;
+    return __generator$1(this, function (_2) {
+        switch (_2.label) {
             case 0:
                 if (!element || typeof element !== 'object') {
                     return [2 /*return*/, Promise.reject('Invalid element provided as first argument')];
@@ -10293,7 +10403,6 @@ var renderElement$1 = function (element, opts) { return __awaiter$1(void 0, void
                 context.logger.debug("Starting document clone with size ".concat(windowBounds.width, "x").concat(windowBounds.height, " scrolled to ").concat(-windowBounds.left, ",").concat(-windowBounds.top));
                 documentCloner = new DocumentCloner$1(context, element, cloneOptions);
                 clonedElement = documentCloner.clonedReferenceElement;
-                // console.log('设置自定义字体',opts.fontConfig,clonedElement,clonedElement.style)
                 if (clonedElement && clonedElement.style) {
                     clonedElement.style.border = 'none';
                     clonedElement.style.boxShadow = 'none';
@@ -10306,7 +10415,7 @@ var renderElement$1 = function (element, opts) { return __awaiter$1(void 0, void
                 }
                 return [4 /*yield*/, documentCloner.toIFrame(ownerDocument, windowBounds)];
             case 1:
-                container = _v.sent();
+                container = _2.sent();
                 _a = isBodyElement$1(clonedElement) || isHTMLElement$1(clonedElement)
                     ? parseDocumentSize$1(clonedElement.ownerDocument)
                     : parseBounds$1(context, clonedElement), width = _a.width, height = _a.height, left = _a.left, top = _a.top;
@@ -10321,10 +10430,36 @@ var renderElement$1 = function (element, opts) { return __awaiter$1(void 0, void
                     height: (_s = opts.height) !== null && _s !== void 0 ? _s : Math.ceil(height),
                     fontConfig: (_t = opts.fontConfig) !== null && _t !== void 0 ? _t : {
                         fontFamily: '',
-                        fontBase64: '',
-                        fontUrl: '',
-                        fontWeight: 400,
-                        fontStyle: ''
+                        fontBase64: ''
+                    },
+                    encryption: {
+                        userPassword: '',
+                        ownerPassword: '',
+                        userPermissions: []
+                    },
+                    precision: (_u = opts.precision) !== null && _u !== void 0 ? _u : 16,
+                    floatPrecision: (_v = opts.floatPrecision) !== null && _v !== void 0 ? _v : 16,
+                    compress: (_w = opts.compress) !== null && _w !== void 0 ? _w : false,
+                    putOnlyUsedFonts: (_x = opts.putOnlyUsedFonts) !== null && _x !== void 0 ? _x : false,
+                    pagination: (_y = opts.pagination) !== null && _y !== void 0 ? _y : false,
+                    format: (_z = opts.format) !== null && _z !== void 0 ? _z : 'a4',
+                    pageConfig: (_0 = opts.pageConfig) !== null && _0 !== void 0 ? _0 : {
+                        header: {
+                            content: '',
+                            height: 50,
+                            contentPosition: 'centerRight',
+                            contentColor: '#333333',
+                            contentFontSize: 16,
+                            padding: [0, 24, 0, 24]
+                        },
+                        footer: {
+                            content: '${currentPage}/${totalPages}',
+                            height: 50,
+                            contentPosition: 'center',
+                            contentColor: '#333333',
+                            contentFontSize: 16,
+                            padding: [0, 24, 0, 24]
+                        }
                     }
                 };
                 if (!foreignObjectRendering) return [3 /*break*/, 3];
@@ -10332,28 +10467,67 @@ var renderElement$1 = function (element, opts) { return __awaiter$1(void 0, void
                 renderer = new ForeignObjectRenderer$1(context, renderOptions);
                 return [4 /*yield*/, renderer.render(clonedElement)];
             case 2:
-                canvas = _v.sent();
-                return [3 /*break*/, 6];
+                canvas = _2.sent();
+                return [3 /*break*/, 11];
             case 3:
                 context.logger.debug("Document cloned, element located at ".concat(left, ",").concat(top, " with size ").concat(width, "x").concat(height, " using computed rendering"));
                 context.logger.debug("Starting DOM parsing", context, clonedElement);
                 return [4 /*yield*/, parseTree$1(context, clonedElement)];
             case 4:
-                root = _v.sent();
+                root = _2.sent();
+                pageHeight = PAGE_FORMAT_MAP[renderOptions.format || 'a4'].height;
+                if (renderOptions.y !== 0) {
+                    offsetY = renderOptions.y;
+                    renderOptions.y = 0;
+                    adjustTop_1 = function (node, delta) {
+                        node.bounds.top = node.bounds.top - delta;
+                        for (var _i = 0, _a = node.textNodes; _i < _a.length; _i++) {
+                            var tn = _a[_i];
+                            for (var _b = 0, _c = tn.textBounds; _b < _c.length; _b++) {
+                                var tb = _c[_b];
+                                tb.bounds.top = tb.bounds.top - delta;
+                            }
+                        }
+                        for (var _d = 0, _e = node.elements; _d < _e.length; _d++) {
+                            var el = _e[_d];
+                            adjustTop_1(el, delta);
+                        }
+                    };
+                    adjustTop_1(root, offsetY);
+                }
+                pageRoots = paginateNode(root, pageHeight, renderOptions.y, renderOptions.pageConfig);
                 Reflect.deleteProperty(root, 'context');
-                // Reflect.deleteProperty(root, 'elements')
-                // =[];
                 if (backgroundColor === root.styles.backgroundColor) {
                     root.styles.backgroundColor = COLORS$1.TRANSPARENT;
                 }
                 context.logger.debug("Starting renderer for element at ".concat(renderOptions.x, ",").concat(renderOptions.y, " with size ").concat(renderOptions.width, "x").concat(renderOptions.height));
+                // console.log('pageRootrenderOptions', root, renderOptions, pageRoots);
+                // , pageRoots, paginationState
+                renderOptions.y = 0;
                 renderer = new CanvasRenderer$1(context, renderOptions);
-                return [4 /*yield*/, renderer.render(root)];
+                renderer.setTotalPages(pageRoots.length);
+                if (!(pageRoots.length > 0)) return [3 /*break*/, 9];
+                return [4 /*yield*/, renderer.renderPage(pageRoots[0], 1)];
             case 5:
-                canvas = _v.sent();
-                _v.label = 6;
+                _2.sent();
+                i = 1;
+                _2.label = 6;
             case 6:
-                if ((_u = opts.removeContainer) !== null && _u !== void 0 ? _u : true) {
+                if (!(i < pageRoots.length)) return [3 /*break*/, 9];
+                renderer.addPage(0);
+                return [4 /*yield*/, renderer.renderPage(pageRoots[i], i + 1)];
+            case 7:
+                _2.sent();
+                _2.label = 8;
+            case 8:
+                i++;
+                return [3 /*break*/, 6];
+            case 9: return [4 /*yield*/, renderer.output()];
+            case 10:
+                canvas = _2.sent();
+                _2.label = 11;
+            case 11:
+                if ((_1 = opts.removeContainer) !== null && _1 !== void 0 ? _1 : true) {
                     if (!DocumentCloner$1.destroy(container)) {
                         context.logger.error("Cannot detach cloned iframe as it is not in the DOM anymore");
                     }
@@ -10362,29 +10536,7 @@ var renderElement$1 = function (element, opts) { return __awaiter$1(void 0, void
                 return [2 /*return*/, canvas];
         }
     });
-}); };
-var parseBackgroundColor$1 = function (context, element, backgroundColorOverride) {
-    var ownerDocument = element.ownerDocument;
-    // http://www.w3.org/TR/css3-background/#special-backgrounds
-    var documentBackgroundColor = ownerDocument.documentElement
-        ? parseColor$1(context, getComputedStyle(ownerDocument.documentElement).backgroundColor)
-        : COLORS$1.TRANSPARENT;
-    var bodyBackgroundColor = ownerDocument.body
-        ? parseColor$1(context, getComputedStyle(ownerDocument.body).backgroundColor)
-        : COLORS$1.TRANSPARENT;
-    var defaultBackgroundColor = typeof backgroundColorOverride === 'string'
-        ? parseColor$1(context, backgroundColorOverride)
-        : backgroundColorOverride === null
-            ? COLORS$1.TRANSPARENT
-            : 0xffffffff;
-    return element === ownerDocument.documentElement
-        ? isTransparent$1(documentBackgroundColor)
-            ? isTransparent$1(bodyBackgroundColor)
-                ? defaultBackgroundColor
-                : bodyBackgroundColor
-            : documentBackgroundColor
-        : defaultBackgroundColor;
-};
+}); };
 
 /*!
  * html2canvas 1.4.1 <https://html2canvas.hertzen.com>