fix: 调整下载pdf逻辑

xinkeaboard-promotion-portal/src/utils/pdf.ts

@@ -1,4 +1,4 @@
-import { nextTick, computed, ref } from 'vue';
+import { nextTick, computed } from 'vue';
 import { useMainStore } from '@/store';
 import { ElLoading } from 'element-plus';
 import html2canvas from 'html2canvas';
@@ -6,67 +6,66 @@ import jsPDF from 'jspdf';
 import { showMessage } from './common';
 
 const mainStore = useMainStore();
-
 const expanded = computed(() => mainStore.getExpanded);
 const isLoadOver = computed(() => mainStore.getIsLoadOver);
 
 export const downloadPDF = async (pdfContent?: HTMLElement) => {
   if (!isLoadOver.value) {
-    showMessage({
-      type: 'warning',
-      message: '数据加载中，请稍后再试'
-    });
+    showMessage({ type: 'warning', message: '数据加载中，请稍后再试' });
     return;
   }
+
   const loading = ElLoading.service({
     lock: true,
-    text: '下载中...',
-    background: 'rgba(0, 0, 0, 0.7)'
+    text: '生成中...',
+    background: 'rgba(0,0,0,0.7)',
   });
-  if (!expanded.value) {
-    mainStore.setExpanded(true);
-    await nextTick();
-  }
-  await nextTick();
-  let canvas = null;
-  if (!pdfContent) {
-    pdfContent = document.querySelector('.record-wrap') as HTMLElement;
-  }
+
   try {
-    canvas = await html2canvas(pdfContent, {
-      scale: 1.5, // 提高分辨率
-      useCORS: true,
-      backgroundColor: '#fff' // 防止透明背景
-    });
+    if (!pdfContent) pdfContent = document.querySelector('.record-wrap') as HTMLElement;
+
+    if (!expanded.value) {
+      mainStore.setExpanded(true);
+      await nextTick();
+    }
+    await nextTick();
+
+    // 高分辨率 canvas
+    const canvas = await html2canvas(pdfContent, { scale: 2, useCORS: true, backgroundColor: '#fff' });
+    const canvasWidth = canvas.width;
+    const canvasHeight = canvas.height;
+
+    const pdf = new jsPDF('p', 'mm', 'a4');
+    const pageWidth = pdf.internal.pageSize.getWidth();
+    const pageHeight = pdf.internal.pageSize.getHeight();
+    const ratio = pageWidth / canvasWidth; // 宽度缩放比例
+    const pagePixelHeight = pageHeight / ratio; // PDF 一页对应 canvas 的高度
+
+    let positionY = 0;
+
+    while (positionY < canvasHeight) {
+      const h = Math.min(pagePixelHeight, canvasHeight - positionY);
+
+      // 创建临时 canvas 截取当前页
+      const pageCanvas = document.createElement('canvas');
+      pageCanvas.width = canvasWidth;
+      pageCanvas.height = h;
+      const ctx = pageCanvas.getContext('2d');
+      ctx?.drawImage(canvas, 0, positionY, canvasWidth, h, 0, 0, canvasWidth, h);
+
+      const imgData = pageCanvas.toDataURL('image/jpeg', 0.95);
+      pdf.addImage(imgData, 'JPEG', 0, 0, pageWidth, h * ratio);
+
+      positionY += h;
+      if (positionY < canvasHeight) pdf.addPage();
+    }
+
+    pdf.save('analysis.pdf');
   } catch (error) {
-    setTimeout(() => {
-      loading.close();
-    }, 1000);
+    console.error(error);
+    showMessage({ type: 'error', message: '生成失败，请稍后再试' });
+  } finally {
     mainStore.setExpanded(false);
-    showMessage({
-      type: 'error',
-      message: '下载失败,请稍后再试'
-    });
-    console.error('html2canvas error:', error);
-    return;
+    setTimeout(() => loading.close(), 500);
   }
-
-  const imgData = canvas.toDataURL('image/png', 0.7);
-
-  const pdf = new jsPDF('p', 'mm', 'a4');
-  // const pdf = new jsPDF("landscape", "mm", "a4"); // 横向 A4
-  // pdf.setFontSize(100); // 设置当前字体大小为 12（单位：pt）
-  const pageWidth = pdf.internal.pageSize.getWidth();
-  const pageHeight = pdf.internal.pageSize.getHeight();
-  const ratio = Math.min(pageWidth / canvas.width, pageHeight / canvas.height);
-  const imgWidth = canvas.width * ratio;
-  const imgHeight = canvas.height * ratio;
-  const x = (pageWidth - imgWidth) / 2;
-  const y = (pageHeight - imgHeight) / 2;
-  pdf.addImage(imgData, 'JPEG', x, y, imgWidth, imgHeight);
-  mainStore.setExpanded(false);
-  pdf.save('charts-and-table.pdf');
-  setTimeout(() => {
-    loading.close();
-  }, 1000);
 };