本篇文章目錄

1. 前言：為什麼網頁列印總是亂七八糟？
2. 列印樣式的核心技術：@media print 語法介紹
3. 列印優化三大關鍵：隱藏無關元素、頁面佈局調整與配色優化
4. 程式碼實作：Print CSS 與自動帶入日期
5. 結語：從螢幕到紙本，打造極致的實體使用者體驗

1. 前言：為什麼網頁列印總是亂七八糟？

在前兩天的文章中，我們完成了 Tool 3（每日用藥時間表生成器）的核心資料處理與 CRUD 互動。但別忘了，這項工具的核心使用對象可能是家中的長輩，或是習慣把紙本貼在冰箱上的使用者。

如果你直接在瀏覽器按 Ctrl + P（或 Cmd + P），往往會發現畫面上充滿了輸入框、新增按鈕、刪除的 ❌ 符號、甚至頁頭頁尾的網址，印出來既不好看又浪費墨水。

今天我們要透過 CSS 的 @media print 媒體查詢，搭配 JavaScript 自動帶入當日日期，讓網頁一鍵轉化為一張乾淨、專業且適合貼在冰箱或隨身攜帶的實體用藥時間表！

2. 列印樣式的核心技術：@media print 語法介紹

在 CSS 中，我們習慣用 @media (max-width: 768px) 來處理手機與平板的響應式網頁（RWD）。同理，CSS 也提供了針對「列印裝置」的媒體查詢：@media print。

當瀏覽器觸發列印（如執行 window.print() 或按下列印快捷鍵）時，瀏覽器會自動載入並套用 @media print 區塊內的 CSS 樣式，蓋過預設的螢幕顯示樣式。

/style.css

  /* 列印樣式 */
  @media print {
    .header, .tab-nav, .no-print, .btn, .form-grid {
      display: none !important;
    }
    .tool-card {
      display: block !important;
      box-shadow: none;
      padding: 0;
    }
    body {
      background: white;
    }

3. 列印優化三大關鍵：隱藏無關元素、頁面佈局調整與配色優化

要將一個網頁打造成適合列印的紙本，主要有三大優化方向：

1. 隱藏無關元素 (.no-print)：

   輸入框、表單標籤、新增/清空按鈕、單筆刪除的 ❌ 符號、頁腳說明等，都是「只有在螢幕操作時才需要，印出來會干擾視覺」的元素，一律設為 display: none !important;。

2. 網頁佈局寬度轉化 (A4 / 滿頁化)：

   螢幕畫面的最大寬度（例如 max-width: 800px）或陰影效果（box-shadow）在紙本上會顯得古怪。列印時應將外層容器拉寬至 100%、消除外邊距（Margin），並隱藏邊框陰影。

3. 極簡配色與黑白優化：

   彩色的背景顏色會耗費大量墨水，且黑白印表機印出來可能變成一片慘灰。列印時應將網頁背景改為純白（#fff），文字強制設為深黑（#000），確保對比度最高。

4. 程式碼實作：Print CSS 與自動帶入日期

以下是 Tool 3 完整整合四時段表格與列印優化後的 CSS 與 JavaScript 程式碼：

/components.css

/* --- Tool 3 四時段表格與列印專用樣式 --- */

/* 多選框排版 */
.checkbox-group {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    padding: 8px 0;
}

.checkbox-group label {
    font-weight: normal;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* 4 時段表格樣式 */
.schedule-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    background-color: var(--card-bg);
}

.schedule-table th {
    background-color: var(--macaron-blue);
    color: var(--text-main);
    padding: 12px 8px;
    text-align: center;
    font-size: 0.95rem;
    border: 1px solid #DEE2E6;
}

.schedule-table td.time-slot {
    vertical-align: top;
    padding: 10px;
    border: 1px solid #DEE2E6;
    min-height: 120px;
    height: 150px; /* 固定高度保持表格美觀 */
    background-color: #FAFAFA;
}

/* 表格內的藥品卡片小標籤 */
.med-chip {
    background-color: #FFFFFF;
    border-left: 4px solid var(--macaron-pink-dark);
    padding: 6px 8px;
    border-radius: 4px;
    margin-bottom: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
}

.med-chip .med-info {
    display: flex;
    flex-direction: column;
}

.med-chip .med-qty {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* 列印專用抬頭 (平時不顯示) */
.print-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 2px solid var(--text-main);
}

.print-date {
    font-size: 0.9rem;
    color: var(--text-muted);
    font-weight: bold;
}

/* --- A4 紙張紙質列印優化 --- */
@media print {
    /* 隱藏非列印元件 */
    .header, .tab-nav, .no-print, .btn, .footer, .subtitle {
        display: none !important;
    }

    body {
        background: white !important;
        color: black !important;
    }

    .tool-card {
        box-shadow: none !important;
        padding: 0 !important;
        display: block !important;
    }

    /* 確保表格在紙張上呈現高品質邊框 */
    .schedule-table th {
        background-color: #F1F3F5 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .schedule-table td.time-slot {
        height: 180px; /* 列印時加高方便填寫格 */
    }

    .med-chip {
        border: 1px solid #CED4DA !important;
        border-left: 4px solid #333 !important;
    }

    .btn-del {
        display: none !important; /* 列印時隱藏刪除按鈕 */
    }
}

JavaScript ：自動帶入日期與一鍵列印

/tool3-schedule.js

document.addEventListener("DOMContentLoaded", () => {
  // 1. 自動帶入當日日期 (YYYY/MM/DD)
  const dateSpan = document.getElementById("current-date-str");
  if (dateSpan) {
    const today = new Date();
    const year = today.getFullYear();
    const month = String(today.getMonth() + 1).padStart(2, '0');
    const day = String(today.getDate()).padStart(2, '0');
    dateSpan.textContent = `${year}/${month}/${day}`;
  }

  // 2. 一鍵觸發列印按鈕
  const btnPrint = document.getElementById("btn-print");
  if (btnPrint) {
    btnPrint.addEventListener("click", () => {
      window.print(); // 呼叫瀏覽器原生列印視窗
    });
  }
});

程式碼分析：

1. 介面與表格排版 (.checkbox-group & .schedule-table)

• 手機防擠壓：時段勾選區用 Flexbox 彈性排版（flex-wrap），在小螢幕自動換行，不會卡在一起。
• 畫面整齊對齊：表格每個時段固定 150px 高度且頂部對齊（vertical-align: top），不管有沒有藥品，格子大小都一模一樣，看起來乾淨俐落。

2. 藥品卡片質感 (.med-chip)

• 重點顯眼：卡片左側加了粉紅邊條（border-left）與微陰影，讓藥品標籤更有立體卡片感。
• 左右對齊：藥品資訊放左邊、刪除按鈕 ❌ 自動推到最右邊，排版不混亂。

3. 紙本列印抬頭 (.print-header)

• 平時在螢幕上隱藏，只有印出來時會出現，將「標題」與「列印日期」排在左右兩端，增添紙本紀錄的正式感。

4. A4 實體列印大優化 (@media print)

• 乾淨無雜訊：用 display: none !important 一口氣隱藏按鈕、輸入框與頁尾，只留純藥品表格。
• 強制印出背景色：加上 print-color-adjust: exact，防止瀏覽器為了省墨水自動把表頭的質感灰底偷洗掉。
• 貼心留白：列印時把格子拉高到 180px，方便長輩印出來後還能拿筆手寫備註。
• 省墨高對比：移除卡片陰影改用黑實線，確保黑白印表機也能印出超清晰的邊框。

5. 結語

今天我們運用了 CSS @media print 與 JavaScript window.print()，成功讓 Tool 3 從「螢幕上的網頁工具」跨足到「實體生活的紙本應用」。

好的 UI/UX 設計不應該只侷限於螢幕畫素上。針對健康醫療、銀髮族輔助這類網頁應用，考慮紙本輸出體驗往往是打動使用者的關鍵細節！