fix: resolve blank page issue when printing PDF by fixing print media query and element display

index.html

@@ -40,27 +40,58 @@
   <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
 
   <style>
-    @media print {
+    @media screen {
-      body * {
-        visibility: hidden !important;
-      }
-      #print-area, #print-area * {
-        visibility: visible !important;
-      }
       #print-area {
-        position: absolute;
-        left: 0;
-        top: 0;
-        width: 100%;
-        margin: 0;
-        padding: 0;
-      }
-      .no-print {
         display: none !important;
       }
+    }
+
+    @media print {
+      @page {
+        size: A4 portrait;
+        margin: 1.2cm;
+      }
+
+      html, body {
+        background: #ffffff !important;
+        color: #000000 !important;
+        margin: 0 !important;
+        padding: 0 !important;
+        width: 100% !important;
+        height: auto !important;
+      }
+
+      /* 隱藏主螢幕所有非列印區域與彈窗 */
+      #app > header,
+      #app > main,
+      #app > footer,
+      #app > div.fixed,
+      .no-print,
+      .fixed {
+        display: none !important;
+      }
+
+      #print-area {
+        display: block !important;
+        visibility: visible !important;
+        position: static !important;
+        width: 100% !important;
+        margin: 0 !important;
+        padding: 0 !important;
+        background: #ffffff !important;
+      }
+
+      #print-area * {
+        visibility: visible !important;
+        -webkit-print-color-adjust: exact !important;
+        print-color-adjust: exact !important;
+      }
+
       .page-break {
-        page-break-after: always;
+        page-break-after: always !important;
-        break-after: page;
+        break-after: page !important;
+        page-break-inside: avoid !important;
+        break-inside: avoid !important;
       }
     }
     
@@ -788,7 +819,7 @@
     </div>
 
     <!-- 列印專用區域 (Print Area) -->
-    <div id="print-area" class="hidden">
+    <div id="print-area">
       <div v-for="student in studentsToPrint" :key="student.id" class="p-8 max-w-4xl mx-auto bg-white page-break border border-slate-300 rounded-2xl mb-8">
         <!-- 學生運動成長卡 標題 -->
         <div class="border-b-2 border-emerald-600 pb-4 mb-6 flex justify-between items-end">
@@ -1429,15 +1460,19 @@ ${customPromptExtra.value ? `4. 教師特別叮嚀：${customPromptExtra.value}`
         const printSingleStudent = (student) => {
           studentsToPrint.value = [student];
           nextTick(() => {
+            setTimeout(() => {
               window.print();
+            }, 120);
           });
         };
 
         // 列印全班
         const openPrintAllModal = () => {
-          studentsToPrint.value = students.value;
+          studentsToPrint.value = [...students.value];
           nextTick(() => {
+            setTimeout(() => {
               window.print();
+            }, 120);
           });
         };