dompdf.js 1.0.3 → 1.1.0

package/dist/dompdf.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
  */
@@ -3497,6 +3497,27 @@
     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',
@@ -3788,12 +3809,6 @@
       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) {
@@ -5118,27 +5133,6 @@
       }
   };
 
-  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;
@@ -5147,6 +5141,8 @@
           this.flags = 0;
           this.foreignobjectrendering = false;
           this.parentforeignobjectrendering = false;
+          this.divisionDisable = false;
+          this.offset = 0;
           if (isDebugging$1(element, 3 /* DebuggerType.PARSE */)) {
               debugger;
           }
@@ -5916,7 +5912,9 @@
           }
           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);
@@ -5928,9 +5926,14 @@
                       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 */;
                       }
@@ -6010,11 +6013,12 @@
                   // 修改 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();
@@ -6097,7 +6101,7 @@
               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)
                       })];
@@ -8987,48 +8991,64 @@
       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;
@@ -9037,9 +9057,6 @@
               _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));
@@ -9049,67 +9066,23 @@
           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) {
@@ -9117,46 +9090,29 @@
           }
           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;
@@ -9168,13 +9124,12 @@
                           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) {
@@ -9196,27 +9151,19 @@
               });
           });
       };
-      // 渲染带有字母间距的文本
       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'; })
@@ -9231,18 +9178,16 @@
               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 () {
@@ -9250,15 +9195,12 @@
               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;
@@ -9267,15 +9209,9 @@
                       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;
@@ -9283,18 +9219,15 @@
                                           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;
                                           }
@@ -9303,24 +9236,10 @@
                                   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';
@@ -9341,31 +9260,14 @@
               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;
@@ -9390,18 +9292,14 @@
                           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));
@@ -9413,18 +9311,15 @@
                           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));
@@ -9437,13 +9332,11 @@
                           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');
@@ -9451,13 +9344,10 @@
                               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) {
@@ -9469,42 +9359,11 @@
                           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),
@@ -9515,9 +9374,6 @@
                                           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();
@@ -9526,47 +9382,25 @@
                                       }
                                   }
                               }
-                              // 渲染单选框
                               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;
@@ -9576,7 +9410,6 @@
                                       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),
@@ -9584,56 +9417,45 @@
                                   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);
                           }
@@ -9642,7 +9464,6 @@
               });
           });
       };
-      // 渲染堆叠上下文内容
       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;
@@ -9652,12 +9473,8 @@
                           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;
@@ -9671,11 +9488,8 @@
                       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;
@@ -9759,16 +9573,7 @@
               });
           });
       };
-      // 创建遮罩
       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);
@@ -9778,54 +9583,33 @@
           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) {
@@ -9839,7 +9623,6 @@
           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;
@@ -9850,7 +9633,7 @@
                           _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;
@@ -9875,55 +9658,35 @@
                               ]), 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;
@@ -9938,27 +9701,22 @@
                       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;
@@ -9971,8 +9729,6 @@
                           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);
                           }
@@ -9980,12 +9736,7 @@
                               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();
                               }
@@ -9993,9 +9744,7 @@
                           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);
                           }
@@ -10042,27 +9791,15 @@
               });
           });
       };
-      // 这个方法用于渲染虚线和点线边框
-      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])) {
@@ -10087,10 +9824,8 @@
                   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);
                   }
@@ -10121,34 +9856,23 @@
                               ? 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];
@@ -10168,42 +9892,189 @@
                       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) {
@@ -10248,19 +10119,258 @@
           : 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')];
@@ -10299,7 +10409,6 @@
                   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';
@@ -10312,7 +10421,7 @@
                   }
                   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;
@@ -10327,10 +10436,36 @@
                       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];
@@ -10338,28 +10473,67 @@
                   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");
                       }
@@ -10368,29 +10542,7 @@
                   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>