@cfmm/umi-plugins-ui-v2 0.0.1

package/dist/esm/utils/exportPage.tpl

@@ -0,0 +1,784 @@
+import html2canvas from 'html2canvas';
+import jsPDF from 'jspdf';
+import { ExportPageOptions } from '../types';
+import { fileDownloadFromUrl } from './fileHelper';
+
+// 注意png类型图片无法使用quality进行压缩
+const IMAGE_TYPE = 'image/jpeg';
+
+const EXTENSION = IMAGE_TYPE.split('/')[1].toLocaleUpperCase();
+
+export class PageExporter {
+  private static defaultOptions: ExportPageOptions = {
+    filename: '导出文件.pdf',
+    quality: 0.9,
+    orientation: 'portrait',
+    format: 'a4',
+    includeBackground: true,
+    margin: { top: 15, right: 15, bottom: 15, left: 15 },
+    avoidBreakSelector: '.ant-card, .ant-pro-card, [pdf-no-break] .container .box',
+    minBlockHeight: 100,
+    showPageNumbers: true,
+    pageNumberFontSize: 10,
+    pageNumberColor: '#666666',
+    watermark: {
+      text: '',
+      font: '16px Arial',
+      color: 'rgb(153, 153, 153)',
+      opacity: 0.3,
+      spacing: 500,
+      rotation: -23,
+    },
+  };
+
+  /**
+   * 智能合并配置：只覆盖用户传入的字段，保留默认配置
+   */
+  private static mergeOptions(options: ExportPageOptions = {}): ExportPageOptions {
+    const merged = { ...this.defaultOptions, ...options };
+
+    // 对水印配置进行深度合并
+    if (options.watermark && this.defaultOptions.watermark) {
+      merged.watermark = {
+        ...this.defaultOptions.watermark,
+        ...options.watermark,
+      };
+    }
+
+    // 对边距配置进行深度合并
+    if (options.margin && this.defaultOptions.margin) {
+      merged.margin = {
+        ...this.defaultOptions.margin,
+        ...options.margin,
+      };
+    }
+
+    return merged;
+  }
+
+  /**
+   * 获取元素中需要避免分割的块的位置信息
+   */
+  private static getBlockPositions(
+    element: HTMLElement,
+    selector: string,
+  ): Array<{ top: number; bottom: number; height: number }> {
+    const positions: Array<{ top: number; bottom: number; height: number }> = [];
+    const blocks = element.querySelectorAll(selector);
+
+    // 获取容器元素的位置作为基准
+    const containerRect = element.getBoundingClientRect();
+    const containerScrollTop = element.scrollTop || 0;
+
+    blocks.forEach((block) => {
+      const blockElement = block as HTMLElement;
+
+      // 使用getBoundingClientRect获取更准确的位置
+      const blockRect = blockElement.getBoundingClientRect();
+
+      // 计算相对于容器的位置
+      const relativeTop = blockRect.top - containerRect.top + containerScrollTop;
+      const height = blockRect.height;
+      const relativeBottom = relativeTop + height;
+
+      // 只添加在容器范围内的块，并且高度大于10px
+      if (relativeTop >= 0 && height > 10) {
+        positions.push({
+          top: relativeTop,
+          bottom: relativeBottom,
+          height: height,
+        });
+      }
+    });
+
+    // 去重和排序 - 移除重叠度很高的块
+    const uniquePositions = this.removeDuplicateBlocks(positions);
+
+    return uniquePositions.sort((a, b) => a.top - b.top);
+  }
+
+  /**
+   * 移除重复和重叠的块
+   */
+  private static removeDuplicateBlocks(
+    positions: Array<{ top: number; bottom: number; height: number }>,
+  ): Array<{ top: number; bottom: number; height: number }> {
+    const unique: Array<{ top: number; bottom: number; height: number }> = [];
+
+    for (const pos of positions) {
+      // 检查是否与已有块重叠度过高
+      const isOverlapping = unique.some((existing) => {
+        const overlapTop = Math.max(pos.top, existing.top);
+        const overlapBottom = Math.min(pos.bottom, existing.bottom);
+        const overlapHeight = Math.max(0, overlapBottom - overlapTop);
+
+        // 如果重叠度超过80%，认为是重复块
+        const overlapRatio = overlapHeight / Math.min(pos.height, existing.height);
+        return overlapRatio > 0.8;
+      });
+
+      if (!isOverlapping) {
+        unique.push(pos);
+      }
+    }
+
+    return unique;
+  }
+
+  /**
+   * 计算智能分页点
+   */
+  private static calculateSmartBreakPoints(
+    totalHeight: number,
+    pageHeight: number,
+    blockPositions: Array<{ top: number; bottom: number; height: number }>,
+    minBlockHeight: number,
+  ): number[] {
+    const breakPoints: number[] = [];
+    let currentPageStart = 0;
+
+    // console.log('开始计算分页点，总高度:', totalHeight, '页面高度:', pageHeight);
+
+    while (currentPageStart < totalHeight) {
+      let currentPageEnd = currentPageStart + pageHeight;
+
+      // 如果已经到达或超过总高度，结束
+      if (currentPageEnd >= totalHeight) {
+        // console.log('到达末尾，停止分页');
+        break;
+      }
+
+      let adjustedBreakPoint = currentPageEnd;
+      let foundConflict = false;
+
+      // console.log(`检查分页点 ${currentPageEnd}，当前页开始于 ${currentPageStart}`);
+
+      // 检查当前分页点是否会分割任何块
+      for (const block of blockPositions) {
+        // 如果块的高度小于最小高度，允许分割
+        if (block.height < minBlockHeight) {
+          // console.log(`跳过小块（高度${block.height}）: ${block.top}-${block.bottom}`);
+          continue;
+        }
+
+        // 如果块跨越了当前分页点
+        if (block.top < currentPageEnd && block.bottom > currentPageEnd) {
+          // console.log(`发现冲突块: ${block.top}-${block.bottom}, 高度: ${block.height}`);
+          foundConflict = true;
+
+          // 检查是否可以将整个块放在当前页
+          if (block.top >= currentPageStart && block.bottom - currentPageStart <= pageHeight) {
+            // 可以放在当前页，将分页点移到块的结束位置后一点
+            adjustedBreakPoint = block.bottom + 1;
+            // console.log(`将分页点调整到块结束位置: ${adjustedBreakPoint}`);
+          } else if (block.top > currentPageStart) {
+            // 块无法完全放在当前页，将分页点移到块的开始位置
+            adjustedBreakPoint = block.top;
+            // console.log(`将分页点调整到块开始位置: ${adjustedBreakPoint}`);
+          } else {
+            // 块从页面开始就存在且太大，允许分割
+            // console.log(`块太大，允许分割: ${block.top}-${block.bottom}`);
+            foundConflict = false;
+          }
+          break;
+        }
+      }
+
+      if (!foundConflict) {
+        // console.log(`没有冲突，使用原始分页点: ${currentPageEnd}`);
+        adjustedBreakPoint = currentPageEnd;
+      }
+
+      // 确保分页点有进步，避免无限循环
+      if (adjustedBreakPoint <= currentPageStart) {
+        adjustedBreakPoint = currentPageStart + Math.min(pageHeight, totalHeight - currentPageStart);
+        // console.log(`调整分页点避免无限循环: ${adjustedBreakPoint}`);
+      }
+
+      breakPoints.push(adjustedBreakPoint);
+      // console.log(`添加分页点: ${adjustedBreakPoint}`);
+      currentPageStart = adjustedBreakPoint;
+    }
+
+    // console.log('最终分页点:', breakPoints);
+    return breakPoints;
+  }
+
+  /**
+   * 在canvas上添加水印
+   */
+  private static addWatermarkToCanvas(
+    canvas: HTMLCanvasElement,
+    watermarkConfig: ExportPageOptions['watermark'],
+  ): void {
+    if (!watermarkConfig?.text) {
+      return;
+    }
+
+    const {
+      text,
+      font = '20px Arial',
+      color = 'rgb(153, 153, 153)',
+      opacity = 0.3,
+      spacing = 500,
+      rotation = -30,
+    } = watermarkConfig;
+
+    const ctx = canvas.getContext('2d');
+    if (!ctx) {
+      console.warn('无法获取 canvas context');
+      return;
+    }
+
+    // 保存当前canvas状态
+    ctx.save();
+
+    // 设置水印样式
+    ctx.font = font;
+    ctx.fillStyle = color; // 直接使用颜色，不在这里设置透明度
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+
+    // 设置全局透明度
+    ctx.globalAlpha = opacity;
+
+    // 添加重复的水印
+    const rotationRad = (rotation * Math.PI) / 180;
+
+    // 计算文本尺寸来确定合适的间距
+    const textMetrics = ctx.measureText(text);
+    const textWidth = textMetrics.width;
+    const textHeight = parseInt(font) || 20;
+
+    // 使用更合理的间距
+    const xSpacing = Math.max(spacing, textWidth + 50);
+    const ySpacing = Math.max(spacing * 0.6, textHeight + 50);
+
+    // 从合适的位置开始绘制，确保覆盖整个canvas
+    const startX = xSpacing / 2;
+    const startY = ySpacing / 2;
+
+    for (let x = startX; x < canvas.width + xSpacing; x += xSpacing) {
+      for (let y = startY; y < canvas.height + ySpacing; y += ySpacing) {
+        ctx.save();
+        ctx.translate(x, y);
+        ctx.rotate(rotationRad);
+        ctx.fillText(text, 0, 0);
+        ctx.restore();
+      }
+    }
+
+    // 恢复canvas状态
+    ctx.restore();
+  }
+
+  /**
+   * 从DOM元素生成canvas
+   */
+  private static async getCanvasFromElement(
+    element: HTMLElement,
+    config: ExportPageOptions,
+  ): Promise<HTMLCanvasElement> {
+    const canvas = await html2canvas(element, {
+      scale: 2, // 提高清晰度
+      useCORS: true,
+      allowTaint: true,
+      backgroundColor: '#ffffff', // 设置白色背景避免黑边
+      logging: false,
+      width: element.scrollWidth,
+      height: element.scrollHeight,
+    });
+
+    // 只有在启用水印且有水印配置时才添加水印
+    if (config.watermark?.text) {
+      // console.log('正在添加水印:', config.watermark);
+      this.addWatermarkToCanvas(canvas, config.watermark);
+      // console.log('水印添加完成');
+    } else {
+      // console.log('水印已禁用或未配置水印文本');
+    }
+
+    return canvas;
+  }
+
+  /**
+   * 获取智能分页点
+   */
+  private static getSmartBreakPoints(
+    element: HTMLElement,
+    imgHeight: number,
+    pageHeight: number,
+    config: ExportPageOptions,
+  ): number[] {
+    if (!config.avoidBreakSelector) {
+      return [];
+    }
+
+    const blockPositions = this.getBlockPositions(element, config.avoidBreakSelector);
+    // console.log(`${logPrefix}去重后找到的块数量:`, blockPositions.length);
+
+    // 输出前几个块的详细信息
+    // blockPositions.slice(0, 8).forEach((block, index) => {
+    //   console.log(`${logPrefix}块 ${index + 1}:`, {
+    //     top: Math.round(block.top),
+    //     bottom: Math.round(block.bottom),
+    //     height: Math.round(block.height)
+    //   });
+    // });
+
+    // 将像素位置转换为PDF坐标
+    const scaleFactor = imgHeight / element.scrollHeight;
+    // console.log(`${logPrefix}缩放因子:`, scaleFactor.toFixed(4), 'imgHeight:', Math.round(imgHeight), 'scrollHeight:', element.scrollHeight);
+
+    const scaledPositions = blockPositions.map((pos) => ({
+      top: pos.top * scaleFactor,
+      bottom: pos.bottom * scaleFactor,
+      height: pos.height * scaleFactor,
+    }));
+
+    // console.log(`${logPrefix}缩放后的块位置:`);
+    // scaledPositions.slice(0, 8).forEach((block, index) => {
+    //   console.log(`${logPrefix}缩放块 ${index + 1}:`, {
+    //     top: Math.round(block.top * 10) / 10,
+    //     bottom: Math.round(block.bottom * 10) / 10,
+    //     height: Math.round(block.height * 10) / 10
+    //   });
+    // });
+
+    const breakPoints = this.calculateSmartBreakPoints(
+      imgHeight,
+      pageHeight,
+      scaledPositions,
+      (config.minBlockHeight || 100) * scaleFactor,
+    );
+
+    // console.log(`${logPrefix}页面高度:`, Math.round(pageHeight), ' 总高度:', Math.round(imgHeight));
+    // console.log(`${logPrefix}计算的分页点:`, breakPoints.map(p => Math.round(p * 10) / 10));
+
+    return breakPoints;
+  }
+
+  /**
+   * 计算单个元素的页数（不实际生成PDF）
+   */
+  private static calculateElementPages(element: HTMLElement, config: ExportPageOptions): number {
+    // 模拟PDF尺寸计算
+    const pdfWidth = config.format === 'a4' ? 210 : config.format === 'a3' ? 297 : 215.9; // mm
+    const pdfHeight = config.format === 'a4' ? 297 : config.format === 'a3' ? 420 : 279.4; // mm
+    const pageHeight = pdfHeight - (config.margin?.top || 15) - (config.margin?.bottom || 15);
+    const imgWidth = pdfWidth - (config.margin?.left || 15) - (config.margin?.right || 15);
+
+    // 模拟canvas尺寸
+    const canvasHeight = element.scrollHeight * 2; // scale: 2
+    const imgHeight = (canvasHeight * imgWidth) / (element.scrollWidth * 2);
+
+    if (imgHeight <= pageHeight) {
+      return 1;
+    }
+
+    // 模拟智能分页计算
+    let elementPages = 1;
+    if (config.avoidBreakSelector) {
+      const blockPositions = this.getBlockPositions(element, config.avoidBreakSelector);
+      const scaleFactor = imgHeight / element.scrollHeight;
+      const scaledPositions = blockPositions.map((pos) => ({
+        top: pos.top * scaleFactor,
+        bottom: pos.bottom * scaleFactor,
+        height: pos.height * scaleFactor,
+      }));
+
+      const breakPoints = this.calculateSmartBreakPoints(
+        imgHeight,
+        pageHeight,
+        scaledPositions,
+        (config.minBlockHeight || 100) * scaleFactor,
+      );
+
+      let currentY = 0;
+      let pageCount = 0;
+
+      while (currentY < imgHeight) {
+        let pageEndY: number;
+
+        if (breakPoints.length > 0 && pageCount < breakPoints.length) {
+          pageEndY = breakPoints[pageCount];
+        } else {
+          pageEndY = Math.min(currentY + pageHeight, imgHeight);
+        }
+
+        const currentPageHeight = pageEndY - currentY;
+
+        if (currentPageHeight > 10) {
+          elementPages = pageCount + 1;
+        }
+
+        currentY = pageEndY;
+        pageCount++;
+      }
+    } else {
+      // 简单分页计算
+      elementPages = Math.ceil(imgHeight / pageHeight);
+    }
+
+    return elementPages;
+  }
+
+  /**
+   * 添加页码到PDF页面
+   */
+  private static addPageNumber(pdf: jsPDF, pageNumber: number, totalPages: number, config: ExportPageOptions): void {
+    if (!config.showPageNumbers) {
+      return;
+    }
+
+    const pdfWidth = pdf.internal.pageSize.getWidth();
+    const pdfHeight = pdf.internal.pageSize.getHeight();
+
+    // 设置页码样式
+    pdf.setFontSize(config.pageNumberFontSize || 10);
+    pdf.setTextColor(config.pageNumberColor || '#666666');
+
+    // 页码文本
+    const pageText = `${pageNumber}/${totalPages}`;
+
+    // 计算文本宽度以便右对齐
+    const textWidth = pdf.getTextWidth(pageText);
+
+    // 页码位置：右下角，距离右边距和下边距各5mm
+    const x = pdfWidth - (config.margin?.right || 15) - 5 - textWidth;
+    const y = pdfHeight - (config.margin?.bottom || 15) + 5;
+
+    // 添加页码
+    pdf.text(pageText, x, y);
+  }
+
+  /**
+   * 将单个元素添加到PDF中（支持智能分页）
+   */
+  private static addElementToPDF(
+    pdf: jsPDF,
+    canvas: HTMLCanvasElement,
+    element: HTMLElement,
+    config: ExportPageOptions,
+    startPageNumber: number = 1,
+    totalPagesInDocument: number = 1,
+  ): number {
+    const pdfWidth = pdf.internal.pageSize.getWidth();
+    const pdfHeight = pdf.internal.pageSize.getHeight();
+    const pageHeight = pdfHeight - (config.margin?.top || 15) - (config.margin?.bottom || 15);
+    const imgWidth = pdfWidth - config.margin!.left - config.margin!.right;
+    const imgHeight = (canvas.height * imgWidth) / canvas.width;
+
+    // 计算当前元素的页数
+    let elementPages = 1;
+    if (imgHeight > pageHeight) {
+      const breakPoints = this.getSmartBreakPoints(element, imgHeight, pageHeight, config);
+
+      // 模拟分页过程来计算当前元素的页数
+      let currentY = 0;
+      let pageCount = 0;
+
+      while (currentY < imgHeight) {
+        let pageEndY: number;
+
+        if (breakPoints.length > 0 && pageCount < breakPoints.length) {
+          pageEndY = breakPoints[pageCount];
+        } else {
+          pageEndY = Math.min(currentY + pageHeight, imgHeight);
+        }
+
+        const currentPageHeight = pageEndY - currentY;
+
+        if (currentPageHeight > 10) {
+          elementPages = pageCount + 1;
+        }
+
+        currentY = pageEndY;
+        pageCount++;
+      }
+    }
+
+    // 如果内容不超过一页，直接添加
+    if (imgHeight <= pageHeight) {
+      const imgData = canvas.toDataURL(IMAGE_TYPE, config.quality);
+      pdf.addImage(
+        imgData,
+        EXTENSION,
+        config.margin!.left,
+        config.margin!.top,
+        imgWidth,
+        Math.min(imgHeight, pageHeight),
+      );
+
+      // 添加页码
+      this.addPageNumber(pdf, startPageNumber, totalPagesInDocument, config);
+
+      return 1;
+    }
+
+    // 获取智能分页点
+    const breakPoints = this.getSmartBreakPoints(element, imgHeight, pageHeight, config);
+
+    let currentY = 0;
+    let pageCount = 0;
+
+    // 智能分页处理
+    while (currentY < imgHeight) {
+      if (pageCount > 0) {
+        pdf.addPage();
+      }
+
+      // 计算当前页要显示的图片高度
+      let pageEndY: number;
+
+      if (breakPoints.length > 0 && pageCount < breakPoints.length) {
+        // 使用智能分页点
+        pageEndY = breakPoints[pageCount];
+        // console.log(`${logPrefix}页面 ${pageCount + 1}: 使用智能分页点 ${pageEndY}`);
+      } else {
+        // 使用标准分页
+        pageEndY = Math.min(currentY + pageHeight, imgHeight);
+        // console.log(`${logPrefix}页面 ${pageCount + 1}: 使用标准分页 ${pageEndY}`);
+      }
+
+      const currentPageHeight = pageEndY - currentY;
+
+      // 如果当前页高度太小，跳过
+      if (currentPageHeight <= 10) {
+        // console.log(`${logPrefix}跳过高度太小的页面: ${currentPageHeight}`);
+        currentY = pageEndY;
+        continue;
+      }
+
+      // console.log(`${logPrefix}页面 ${pageCount + 1}: 从 ${currentY} 到 ${pageEndY}, 高度: ${currentPageHeight}`);
+
+      // 计算图片在canvas中的裁剪位置
+      const sourceY = (currentY / imgHeight) * canvas.height;
+      const sourceHeight = (currentPageHeight / imgHeight) * canvas.height;
+
+      // 创建裁剪后的canvas
+      const pageCanvas = document.createElement('canvas');
+      const pageCtx = pageCanvas.getContext('2d')!;
+      pageCanvas.width = canvas.width;
+      pageCanvas.height = sourceHeight;
+
+      // 绘制裁剪的部分
+      pageCtx.drawImage(canvas, 0, sourceY, canvas.width, sourceHeight, 0, 0, canvas.width, sourceHeight);
+
+      // 转换为图片数据
+      const pageImgData = pageCanvas.toDataURL(IMAGE_TYPE, config.quality);
+
+      // 添加到PDF - 每页都从相同的顶部边距开始
+      pdf.addImage(
+        pageImgData,
+        EXTENSION,
+        config.margin!.left,
+        config.margin!.top, // 每页都从顶部边距开始
+        imgWidth,
+        currentPageHeight,
+      );
+
+      // 添加页码
+      this.addPageNumber(pdf, startPageNumber + pageCount, totalPagesInDocument, config);
+
+      currentY = pageEndY;
+      pageCount++;
+    }
+
+    return elementPages;
+  }
+
+  /**
+   * 导出DOM元素为图片
+   * @param element - 要导出的DOM元素
+   * @param options - 导出配置
+   */
+  static async exportToImage(element: HTMLElement, options: ExportPageOptions = {}): Promise<void> {
+    const config = this.mergeOptions(options);
+
+    try {
+      // 使用html2canvas截取DOM，并添加水印
+      const canvas = await this.getCanvasFromElement(element, config);
+
+      const imageData = canvas.toDataURL(config.imageType, config.quality);
+
+      fileDownloadFromUrl(imageData, config.filename || '导出文件');
+
+      URL.revokeObjectURL(imageData);
+    } catch (error) {
+      console.error('图片导出失败:', error);
+      throw new Error('图片导出失败，请重试');
+    }
+  }
+
+  /**
+   * 预览图片（在新窗口中打开）
+   * @param element - 要预览的DOM元素
+   * @param options - 导出配置
+   */
+  static async previewImage(element: HTMLElement, options: ExportPageOptions = {}): Promise<void> {
+    const config = this.mergeOptions(options);
+
+    try {
+      // 使用html2canvas截取DOM，并添加水印
+      const canvas = await this.getCanvasFromElement(element, config);
+
+      const imageData = canvas.toDataURL(config.imageType, config.quality);
+
+      // 创建新窗口并显示图片
+      const newWindow = window.open('', '_blank');
+      if (newWindow) {
+        newWindow.document.write(`
+          <!DOCTYPE html>
+          <html>
+            <head>
+              <title>图片预览</title>
+              <style>
+                body {
+                  margin: 0;
+                  padding: 20px;
+                  display: flex;
+                  justify-content: center;
+                  align-items: center;
+                  min-height: 100vh;
+                  background-color: #f5f5f5;
+                }
+                img {
+                  max-width: 100%;
+                  max-height: 100%;
+                  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+                  border-radius: 4px;
+                }
+              </style>
+            </head>
+            <body>
+              <img src="${imageData}" alt="预览图片" />
+            </body>
+          </html>
+        `);
+        newWindow.document.close();
+      } else {
+        // 如果无法打开新窗口，降级为直接打开图片
+        window.open(imageData, '_blank');
+      }
+    } catch (error) {
+      console.error('图片预览失败:', error);
+      throw new Error('图片预览失败，请重试');
+    }
+  }
+
+  /**
+   * 导出DOM元素为PDF
+   * @param element - 要导出的DOM元素
+   * @param options - 导出配置
+   */
+  static async exportToPDF(element: HTMLElement, options: ExportPageOptions = {}): Promise<void> {
+    const config = this.mergeOptions(options);
+
+    try {
+      // 计算总页数
+      const totalPages = this.calculateElementPages(element, config);
+
+      // 使用html2canvas截取DOM，并添加水印
+      const canvas = await this.getCanvasFromElement(element, config);
+
+      // 创建PDF
+      const pdf = new jsPDF({
+        orientation: config.orientation,
+        unit: 'mm',
+        format: config.format,
+      });
+
+      this.addElementToPDF(pdf, canvas, element, config, 1, totalPages);
+
+      // 保存PDF
+      pdf.save(config.filename!);
+    } catch (error) {
+      console.error('PDF导出失败:', error);
+      throw new Error('PDF导出失败，请重试');
+    }
+  }
+
+  /**
+   * 导出多个DOM元素为PDF（每个元素一页）
+   * @param elements - DOM元素数组
+   * @param options - 导出配置
+   */
+  static async exportMultipleToPDF(elements: HTMLElement[], options: ExportPageOptions = {}): Promise<void> {
+    const config = this.mergeOptions(options);
+
+    try {
+      // 预先计算所有元素的总页数
+      const elementPageCounts = elements.map((element) => this.calculateElementPages(element, config));
+      const totalPages = elementPageCounts.reduce((sum, count) => sum + count, 0);
+
+      const pdf = new jsPDF({
+        orientation: config.orientation,
+        unit: 'mm',
+        format: config.format,
+      });
+
+      let currentPageNumber = 1;
+
+      for (let i = 0; i < elements.length; i++) {
+        const element = elements[i];
+
+        const canvas = await this.getCanvasFromElement(element, config);
+
+        if (i > 0) {
+          pdf.addPage();
+        }
+
+        const pagesAdded = this.addElementToPDF(pdf, canvas, element, config, currentPageNumber, totalPages);
+        currentPageNumber += pagesAdded;
+      }
+
+      pdf.save(config.filename!);
+    } catch (error) {
+      console.error('PDF导出失败:', error);
+      throw new Error('PDF导出失败，请重试');
+    }
+  }
+
+  /**
+   * 预览PDF（在新窗口中打开）
+   * @param element - 要预览的DOM元素
+   * @param options - 导出配置
+   */
+  static async previewPDF(element: HTMLElement, options: ExportPageOptions = {}): Promise<void> {
+    const config = this.mergeOptions(options);
+
+    try {
+      // 计算总页数
+      const totalPages = this.calculateElementPages(element, config);
+
+      const canvas = await this.getCanvasFromElement(element, config);
+
+      const pdf = new jsPDF({
+        orientation: config.orientation,
+        unit: 'mm',
+        format: config.format,
+      });
+
+      this.addElementToPDF(pdf, canvas, element, config, 1, totalPages);
+
+      // 在新窗口中预览
+      const pdfBlob = pdf.output('blob');
+      const url = URL.createObjectURL(pdfBlob);
+      window.open(url, '_blank');
+
+      // 清理URL对象
+      setTimeout(() => URL.revokeObjectURL(url), 1000);
+    } catch (error) {
+      console.error('PDF预览失败:', error);
+      throw new Error('PDF预览失败，请重试');
+    }
+  }
+}
+
+// 导出便捷函数
+export const exportToPDF = PageExporter.exportToPDF;
+export const exportMultipleToPDF = PageExporter.exportMultipleToPDF;
+export const previewPDF = PageExporter.previewPDF;
+export const exportToImage = PageExporter.exportToImage;
+export const previewImage = PageExporter.previewImage;