Browse Source

fix: 报告分页增加上下边距

周玉环 1 day ago
parent
commit
e047c02bdf
1 changed files with 18 additions and 2 deletions
  1. 18 2
      xinkeaboard-promotion-portal/src/utils/pdf.ts

+ 18 - 2
xinkeaboard-promotion-portal/src/utils/pdf.ts

@@ -57,10 +57,22 @@ async function generatePDFBlob(
     const ratio = pageWidth / canvasWidth;
     const ratio = pageWidth / canvasWidth;
     const pagePixelHeight = pageHeight / ratio;
     const pagePixelHeight = pageHeight / ratio;
 
 
+    // 页边距(像素)
+    const marginTop = 20;    // 仅作用于非第一页
+    const marginBottom = 40; // 所有页生效
+
     let positionY = 0;
     let positionY = 0;
+    let pageIndex = 0;
 
 
     while (positionY < canvasHeight) {
     while (positionY < canvasHeight) {
-      const h = Math.min(pagePixelHeight, canvasHeight - positionY);
+      // 判断是否第一页
+      const topMargin = pageIndex === 0 ? 0 : marginTop;
+
+      // 每页实际可容纳的内容高度
+      const h = Math.min(
+        pagePixelHeight - topMargin - marginBottom,
+        canvasHeight - positionY
+      );
 
 
       const pageCanvas = document.createElement('canvas');
       const pageCanvas = document.createElement('canvas');
       pageCanvas.width = canvasWidth;
       pageCanvas.width = canvasWidth;
@@ -69,9 +81,13 @@ async function generatePDFBlob(
       ctx?.drawImage(canvas, 0, positionY, canvasWidth, h, 0, 0, canvasWidth, h);
       ctx?.drawImage(canvas, 0, positionY, canvasWidth, h, 0, 0, canvasWidth, h);
 
 
       const imgData = pageCanvas.toDataURL('image/jpeg', 0.95);
       const imgData = pageCanvas.toDataURL('image/jpeg', 0.95);
-      pdf.addImage(imgData, 'JPEG', 0, 0, pageWidth, h * ratio);
+
+      // 添加到 PDF 时,整体往下偏移 topMargin
+      pdf.addImage(imgData, 'JPEG', 0, topMargin * ratio, pageWidth, h * ratio);
 
 
       positionY += h;
       positionY += h;
+      pageIndex++;
+
       if (positionY < canvasHeight) pdf.addPage();
       if (positionY < canvasHeight) pdf.addPage();
     }
     }