dompdf.js 1.0.3 → 1.1.0

package/dist/lib/render/canvas/pdf-renderer.js

@@ -52,78 +52,89 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CanvasRenderer = void 0;
-var jspdf_1 = require("jspdf"); // 用于生成PDF文档
-// import "../../SourceHanSansSC-Normal-Min-normal"; // 导入思源黑体
-// import "../../SourceHanSansCN-Medium-normal"; // 导入阿里巴巴普惠体字体
-var bitwise_1 = require("../../core/bitwise"); // 位运算工具函数
-var bounds_1 = require("../../css/layout/bounds"); // 边界计算
-var text_1 = require("../../css/layout/text"); // 文本分段和边界
-var line_height_1 = require("../../css/property-descriptors/line-height"); // 行高计算
-// import { TextShadow } from '../../css/property-descriptors/text-shadow'; // 文本阴影
-var parser_1 = require("../../css/syntax/parser"); // 维度标记判断
-var color_1 = require("../../css/types/color"); // 颜色相关工具
-// import { calculateGradientDirection, calculateRadius, processColorStops } from '../../css/types/functions/gradient'; // 渐变计算
-var image_1 = require("../../css/types/image"); // 图片类型
-var length_percentage_1 = require("../../css/types/length-percentage"); // 长度百分比FIFTY_PERCENT,
-var select_element_container_1 = require("../../dom/elements/select-element-container"); // Select元素容器
-var textarea_element_container_1 = require("../../dom/elements/textarea-element-container"); // Textarea元素容器
-var canvas_element_container_1 = require("../../dom/replaced-elements/canvas-element-container"); // Canvas元素容器
-var iframe_element_container_1 = require("../../dom/replaced-elements/iframe-element-container"); // IFrame元素容器
-var image_element_container_1 = require("../../dom/replaced-elements/image-element-container"); // Image元素容器
-var input_element_container_1 = require("../../dom/replaced-elements/input-element-container"); // Input元素容器
-var svg_element_container_1 = require("../../dom/replaced-elements/svg-element-container"); // SVG元素容器
-var background_1 = require("../background"); // 背景渲染计算
-var bezier_curve_1 = require("../bezier-curve"); // 贝塞尔曲线
-var border_1 = require("../border"); // 边框路径解析
-var bound_curves_1 = require("../bound-curves"); // 边界曲线计算
-var box_sizing_1 = require("../box-sizing"); // 内容盒模型
-var effects_1 = require("../effects"); // 效果相关
-var font_metrics_1 = require("../font-metrics"); // 字体度量
-var renderer_1 = require("../renderer"); // 渲染器基类
-var stacking_context_1 = require("../stacking-context"); // 堆叠上下文
-var vector_1 = require("../vector"); // 向量
-// 遮罩偏移常量
-// const MASK_OFFSET = 10000;
-// Canvas渲染器类,继承自Renderer
+var jspdf_1 = require("jspdf");
+var bitwise_1 = require("../../core/bitwise");
+var bounds_1 = require("../../css/layout/bounds");
+var text_1 = require("../../css/layout/text");
+var line_height_1 = require("../../css/property-descriptors/line-height");
+var parser_1 = require("../../css/syntax/parser");
+var color_1 = require("../../css/types/color");
+var length_percentage_1 = require("../../css/types/length-percentage");
+var select_element_container_1 = require("../../dom/elements/select-element-container");
+var textarea_element_container_1 = require("../../dom/elements/textarea-element-container");
+var canvas_element_container_1 = require("../../dom/replaced-elements/canvas-element-container");
+var iframe_element_container_1 = require("../../dom/replaced-elements/iframe-element-container");
+var image_element_container_1 = require("../../dom/replaced-elements/image-element-container");
+var input_element_container_1 = require("../../dom/replaced-elements/input-element-container");
+var svg_element_container_1 = require("../../dom/replaced-elements/svg-element-container");
+var background_1 = require("../background");
+var bezier_curve_1 = require("../bezier-curve");
+var border_1 = require("../border");
+var bound_curves_1 = require("../bound-curves");
+var box_sizing_1 = require("../box-sizing");
+var effects_1 = require("../effects");
+var font_metrics_1 = require("../font-metrics");
+var renderer_1 = require("../renderer");
+var stacking_context_1 = require("../stacking-context");
+var vector_1 = require("../vector");
 var CanvasRenderer = /** @class */ (function (_super) {
     __extends(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 jspdf_1.jsPDF({
             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;
@@ -132,9 +143,6 @@ var CanvasRenderer = /** @class */ (function (_super) {
             _this.canvas.style.height = "10px";
         }
         _this.fontMetrics = new font_metrics_1.FontMetrics(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));
@@ -144,67 +152,23 @@ var CanvasRenderer = /** @class */ (function (_super) {
         return __awaiter(this, void 0, void 0, function () {
             var fontData;
             return __generator(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(this, void 0, void 0, function () {
-            var response, blob;
-            return __generator(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) {
@@ -212,46 +176,29 @@ var CanvasRenderer = /** @class */ (function (_super) {
         }
         effects.forEach(function (effect) { return _this.applyEffect(effect); });
     };
-    // 应用单个效果
     CanvasRenderer.prototype.applyEffect = function (effect) {
         this.ctx.save();
-        // this.context2dCtx.save()
         if ((0, effects_1.isOpacityEffect)(effect)) {
             this.ctx.globalAlpha = effect.opacity;
-            // this.context2dCtx.globalAlpha = effect.opacity
         }
         if ((0, effects_1.isTransformEffect)(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 ((0, effects_1.isClipEffect)(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(this, void 0, void 0, function () {
             var styles;
@@ -263,13 +210,12 @@ var CanvasRenderer = /** @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(this, void 0, void 0, function () {
             return __generator(this, function (_a) {
@@ -291,27 +237,19 @@ var CanvasRenderer = /** @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 = (0, text_1.segmentGraphemes)(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'; })
@@ -326,19 +264,16 @@ var CanvasRenderer = /** @class */ (function (_super) {
             fontSize
         ];
     };
-    // 添加一个新的颜色转换函数
     CanvasRenderer.prototype.convertColor = function (color) {
-        // 如果是透明色，返回白色
         if ((0, color_1.isTransparent)(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'));
-        // 其他颜色格式直接使用 asString
+        return "#".concat(r.toString(16).padStart(2, '0')).concat(g.toString(16).padStart(2, '0')).concat(b
+            .toString(16)
+            .padStart(2, '0'));
         return (0, color_1.asString)(color);
     };
     CanvasRenderer.prototype.renderTextNode = function (text, styles) {
@@ -347,15 +282,12 @@ var CanvasRenderer = /** @class */ (function (_super) {
             var _this = this;
             return __generator(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;
@@ -364,15 +296,9 @@ var CanvasRenderer = /** @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 = (0, color_1.asString)(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 = (0, color_1.asString)(styles.textDecorationColor || styles.color);
                                     styles.textDecorationLine.forEach(function (textDecorationLine) {
                                         var x = textItem.bounds.left;
@@ -380,18 +306,15 @@ var CanvasRenderer = /** @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;
                                         }
@@ -400,24 +323,10 @@ var CanvasRenderer = /** @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 = (0, color_1.asString)(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';
@@ -438,31 +347,14 @@ var CanvasRenderer = /** @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(this, void 0, void 0, function () {
-            var container, curves, styles, _i, _a, child, image, bounds, x, y, width, height, e_1, 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, e_3, fontFamily, bounds;
+            var container, curves, styles, _i, _a, child, image, bounds, x, y, width, height, e_1, 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, e_3, fontFamily, bounds;
             return __generator(this, function (_c) {
                 switch (_c.label) {
                     case 0:
-                        // 应用内容效果
                         this.applyEffects(paint.getEffects(4 /* EffectTarget.CONTENT */));
                         container = paint.container;
                         curves = paint.curves;
@@ -487,18 +379,14 @@ var CanvasRenderer = /** @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 = (0, box_sizing_1.contentBox)(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));
@@ -510,18 +398,15 @@ var CanvasRenderer = /** @class */ (function (_super) {
                         return [3 /*break*/, 8];
                     case 8:
                         if (container instanceof canvas_element_container_1.CanvasElementContainer) {
-                            // 渲染到 Canvas
                             this.renderReplacedElement(container, curves, container.canvas);
-                            // 添加到 PDF
                             try {
                                 bounds = (0, box_sizing_1.contentBox)(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));
@@ -534,13 +419,11 @@ var CanvasRenderer = /** @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 = (0, box_sizing_1.contentBox)(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');
@@ -548,13 +431,10 @@ var CanvasRenderer = /** @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) {
@@ -566,42 +446,12 @@ var CanvasRenderer = /** @class */ (function (_super) {
                         this.context.logger.error("Error loading svg ".concat(e_2));
                         return [3 /*break*/, 12];
                     case 12:
-                        if (!(container instanceof iframe_element_container_1.IFrameElementContainer && 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);
+                        if (container instanceof iframe_element_container_1.IFrameElementContainer && container.tree) {
                         }
-                        _c.label = 14;
-                    case 14:
-                        // 处理Input元素
                         if (container instanceof input_element_container_1.InputElementContainer) {
                             size = Math.min(container.bounds.width, container.bounds.height);
-                            // 渲染复选框
                             if (container.type === input_element_container_1.CHECKBOX) {
                                 if (container.checked) {
-                                    // this.ctx.save();
                                     this.context2dCtx.save();
                                     this.path([
                                         new vector_1.Vector(container.bounds.left + size * 0.39363, container.bounds.top + size * 0.79),
@@ -612,9 +462,6 @@ var CanvasRenderer = /** @class */ (function (_super) {
                                         new vector_1.Vector(container.bounds.left + size * 0.84, container.bounds.top + size * 0.34085),
                                         new vector_1.Vector(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_element_container_1.INPUT_COLOR);
                                     this.context2dCtx.fill();
                                     this.context2dCtx.restore();
@@ -623,47 +470,25 @@ var CanvasRenderer = /** @class */ (function (_super) {
                                     }
                                 }
                             }
-                            // 渲染单选框
                             else if (container.type === input_element_container_1.RADIO) {
                                 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_element_container_1.INPUT_COLOR);
                                     this.context2dCtx.fill();
                                     this.context2dCtx.restore();
-                                    // 在 restore 之后重新设置字体
                                 }
                             }
                         }
-                        // 处理文本输入元素
                         if (isTextInputElement(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(container.styles.textAlign);
                             bounds = (0, box_sizing_1.contentBox)(container);
                             x = 0;
-                            // 根据文本对齐方式调整x坐标
                             switch (container.styles.textAlign) {
                                 case 1 /* TEXT_ALIGN.CENTER */:
                                     x += bounds.width / 2;
@@ -673,7 +498,6 @@ var CanvasRenderer = /** @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.Vector(bounds.left, bounds.top),
@@ -681,56 +505,45 @@ var CanvasRenderer = /** @class */ (function (_super) {
                                 new vector_1.Vector(bounds.left + bounds.width, bounds.top + bounds.height),
                                 new vector_1.Vector(bounds.left, bounds.top + bounds.height)
                             ]);
-                            // this.ctx.clip();
                             this.context2dCtx.clip();
                             this.renderTextWithLetterSpacing(new text_1.TextBounds(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 (!(0, bitwise_1.contains)(container.styles.display, 2048 /* DISPLAY.LIST_ITEM */)) return [3 /*break*/, 20];
-                        if (!(container.styles.listStyleImage !== null)) return [3 /*break*/, 19];
+                        if (!(0, bitwise_1.contains)(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:
                         e_3 = _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.Bounds(container.bounds.left, container.bounds.top + (0, length_percentage_1.getAbsoluteValue)(container.styles.paddingTop, container.bounds.width), container.bounds.width, (0, line_height_1.computeLineHeight)(styles.lineHeight, styles.fontSize.number) / 2 + 1);
                             this.renderTextWithLetterSpacing(new text_1.TextBounds(paint.listValue, bounds), styles.letterSpacing, (0, line_height_1.computeLineHeight)(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);
                         }
@@ -739,7 +552,6 @@ var CanvasRenderer = /** @class */ (function (_super) {
             });
         });
     };
-    // 渲染堆叠上下文内容
     CanvasRenderer.prototype.renderStackContent = function (stack) {
         return __awaiter(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;
@@ -749,12 +561,8 @@ var CanvasRenderer = /** @class */ (function (_super) {
                         if ((0, bitwise_1.contains)(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;
@@ -768,11 +576,8 @@ var CanvasRenderer = /** @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;
@@ -856,16 +661,7 @@ var CanvasRenderer = /** @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);
@@ -875,54 +671,33 @@ var CanvasRenderer = /** @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 = (0, bezier_curve_1.isBezierCurve)(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 ((0, bezier_curve_1.isBezierCurve)(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) {
@@ -936,7 +711,6 @@ var CanvasRenderer = /** @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(this, void 0, void 0, function () {
             var index, _i, _a, backgroundImage, image, url, e_4, _b, path, x, y, width, height, pattern, xPt, yPt, widthPt, heightPt;
@@ -947,7 +721,7 @@ var CanvasRenderer = /** @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;
@@ -972,113 +746,35 @@ var CanvasRenderer = /** @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 ((0, image_1.isLinearGradient)(backgroundImage)) {
-                            // const [path, x, y, width, height] = calculateBackgroundRendering(container, index, [null, null, null]);
-                            // const [lineLength, x0, x1, y0, y1] = calculateGradientDirection(backgroundImage.angle, width, height);
-                            // const canvas = document.createElement('canvas');
-                            // canvas.width = width;
-                            // canvas.height = height;
-                            // const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
-                            // const gradient = ctx.createLinearGradient(x0, y0, x1, y1);
-                            // processColorStops(backgroundImage.stops, lineLength).forEach((colorStop) =>
-                            //     gradient.addColorStop(colorStop.stop, this.convertColor(colorStop.color))
-                            // );
-                            // ctx.fillStyle = gradient;
-                            // ctx.fillRect(0, 0, width, height);
-                            // if (width > 0 && height > 0) {
-                            //     const pattern = this.ctx.createPattern(canvas, 'repeat') as CanvasPattern;
-                            //     this.renderRepeat(path, pattern, x, y);
-                            // }
-                        }
-                        else if ((0, image_1.isRadialGradient)(backgroundImage)) {
-                            // const [path, left, top, width, height] = calculateBackgroundRendering(container, index, [
-                            //     null,
-                            //     null,
-                            //     null
-                            // ]);
-                            // const position = backgroundImage.position.length === 0 ? [FIFTY_PERCENT] : backgroundImage.position;
-                            // const x = getAbsoluteValue(position[0], width);
-                            // const y = getAbsoluteValue(position[position.length - 1], height);
-                            // const [rx, ry] = calculateRadius(backgroundImage, x, y, width, height);
-                            // if (rx > 0 && ry > 0) {
-                            //     const radialGradient = this.ctx.createRadialGradient(left + x, top + y, 0, left + x, top + y, rx);
-                            //     processColorStops(backgroundImage.stops, rx * 2).forEach((colorStop) =>
-                            //         radialGradient.addColorStop(colorStop.stop, this.convertColor(colorStop.color))
-                            //     );
-                            //     this.path(path);
-                            //     this.ctx.fillStyle = radialGradient;
-                            //     this.context2dCtx.fillStyle = this.convertColor(radialGradient);
-                            //     if (rx !== ry) {
-                            //         // transforms for elliptical radial gradient
-                            //         const midX = container.bounds.left + 0.5 * container.bounds.width;
-                            //         const midY = container.bounds.top + 0.5 * container.bounds.height;
-                            //         const f = ry / rx;
-                            //         const invF = 1 / f;
-                            //         // this.ctx.save();
-                            //         // this.ctx.translate(midX, midY);
-                            //         // this.ctx.transform(1, 0, 0, f, 0, 0);
-                            //         // this.ctx.translate(-midX, -midY);
-                            //         // this.ctx.fillRect(left, invF * (top - midY) + midY, width, height * invF);
-                            //         // this.ctx.restore();
-                            //         this.context2dCtx.save();
-                            //         this.context2dCtx.translate(midX, midY);
-                            //         this.context2dCtx.transform(1, 0, 0, f, 0, 0);
-                            //         this.context2dCtx.translate(-midX, -midY);
-                            //         this.context2dCtx.fillRect(left, invF * (top - midY) + midY, width, height * invF);
-                            //         this.context2dCtx.restore();
-                            //     } else {
-                            //         // this.ctx.fill();
-                            //         this.context2dCtx.fill()
-                            //     }
-                            // }
-                        }
+                        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(this, void 0, void 0, function () {
             return __generator(this, function (_a) {
-                // console.log('绘制边框')
-                // 解析边框路径
-                // console.log('Border curve points:', JSON.stringify(curvePoints));
-                // console.log('Page height:', this.jspdf.internal.pageSize.height);
                 this.path((0, border_1.parsePathForBorder)(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(this, void 0, void 0, function () {
             var outerPaths, innerPaths;
@@ -1093,27 +789,22 @@ var CanvasRenderer = /** @class */ (function (_super) {
                     case 2:
                         outerPaths = (0, border_1.parsePathForBorderDoubleOuter)(curvePoints, side);
                         this.path(outerPaths);
-                        // this.ctx.fillStyle = this.convertColor(color);
-                        // this.ctx.fill();
                         this.context2dCtx.fillStyle = this.convertColor(color);
                         this.context2dCtx.fill();
                         innerPaths = (0, border_1.parsePathForBorderDoubleInner)(curvePoints, side);
                         this.path(innerPaths);
-                        // this.ctx.fill();
                         this.context2dCtx.fill();
                         return [2 /*return*/];
                 }
             });
         });
     };
-    // 渲染节点的背景和边框
     CanvasRenderer.prototype.renderNodeBackgroundAndBorders = function (paint) {
         return __awaiter(this, void 0, void 0, function () {
             var styles, hasBackground, borders, backgroundPaintingArea, foreignobjectrendering, side, _i, borders_1, border;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
-                        // 应用背景和边框的效果
                         this.applyEffects(paint.getEffects(2 /* EffectTarget.BACKGROUND_BORDERS */));
                         styles = paint.container.styles;
                         hasBackground = !(0, color_1.isTransparent)(styles.backgroundColor) || styles.backgroundImage.length;
@@ -1126,8 +817,6 @@ var CanvasRenderer = /** @class */ (function (_super) {
                         backgroundPaintingArea = calculateBackgroundCurvedPaintingArea((0, background_1.getBackgroundValueForIndex)(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);
                         }
@@ -1135,12 +824,7 @@ var CanvasRenderer = /** @class */ (function (_super) {
                             this.context2dCtx.save();
                             this.path(backgroundPaintingArea);
                             this.context2dCtx.clip();
-                            // this.ctx.save();
-                            // this.path(backgroundPaintingArea);
-                            // this.ctx.clip();
                             if (!(0, color_1.isTransparent)(styles.backgroundColor)) {
-                                // this.ctx.fillStyle = asString(styles.backgroundColor);
-                                // this.ctx.fill();
                                 this.context2dCtx.fillStyle = this.convertColor(styles.backgroundColor);
                                 this.context2dCtx.fill();
                             }
@@ -1148,9 +832,7 @@ var CanvasRenderer = /** @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);
                         }
@@ -1197,27 +879,15 @@ var CanvasRenderer = /** @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(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(this, function (_a) {
-                // this.ctx.save();  // 保存当前画布状态
-                // this.jspdfCtx.saveGraphicsState(); // 保存PDF绘图状态
                 this.context2dCtx.save();
                 strokePaths = (0, border_1.parsePathForBorderStroke)(curvePoints, side);
                 boxPaths = (0, border_1.parsePathForBorder)(curvePoints, side);
-                // 如果是虚线边框,需要先裁剪路径
                 if (style === 2 /* BORDER_STYLE.DASHED */) {
                     this.path(boxPaths);
-                    // this.ctx.clip();
-                    // // PDF裁剪路径
-                    // this.jspdfCtx.clip();
                     this.context2dCtx.clip();
                 }
                 if ((0, bezier_curve_1.isBezierCurve)(boxPaths[0])) {
@@ -1242,10 +912,8 @@ var CanvasRenderer = /** @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);
                 }
@@ -1276,34 +944,23 @@ var CanvasRenderer = /** @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 ((0, bezier_curve_1.isBezierCurve)(boxPaths[0])) {
                         path1 = boxPaths[3];
@@ -1323,42 +980,189 @@ var CanvasRenderer = /** @class */ (function (_super) {
                     if ((0, bezier_curve_1.isBezierCurve)(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.render = function (element) {
+    CanvasRenderer.prototype.addPage = function (offsetY) {
         return __awaiter(this, void 0, void 0, function () {
-            var stack, pdfBlob;
+            return __generator(this, function (_a) {
+                this.context2dCtx.translate(0, -offsetY);
+                this.jspdfCtx.addPage();
+                return [2 /*return*/];
+            });
+        });
+    };
+    CanvasRenderer.prototype.renderPage = function (element, pageNum) {
+        return __awaiter(this, void 0, void 0, function () {
+            var cfg, pageW, pageH, mt, mb, bx, by, bw, bh, stack, headerText, headerPos, footerText, footerPos;
             return __generator(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 = (0, stacking_context_1.parseStackingContexts)(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(this, void 0, void 0, function () {
+            var pdfBlob;
+            return __generator(this, function (_a) {
+                pdfBlob = this.jspdfCtx.output('blob');
+                return [2 /*return*/, pdfBlob];
+            });
+        });
+    };
     return CanvasRenderer;
 }(renderer_1.Renderer));
 exports.CanvasRenderer = CanvasRenderer;