Day 15 自動化作業工具實踐

HTML 格式化報表郵件

金融美學與樣式注入

如何在 VBA 中操作 HTML 範本與 CSS，
將枯燥的帳務通知升級為專業的報表。

Frontend Engineering & Automation

日常作業的痛點

排版雜亂

傳統系統自動寄送的純文字郵件，缺乏結構，數據擠成一團，難以快速閱讀。

重點失焦

帳務異常或重要指標無法凸顯，容易淹沒在龐大的文字海中，導致決策延遲。

缺乏專業感

面對高階主管或外部客戶，簡陋的通知信無法展現金融機構應有的嚴謹與質感。

轉型目標：金融美學

我們需要一個強大的「html 寄送郵件工具」

提升資訊傳遞效率： 透過網格與色彩引導視覺動線。
建立品牌信任感： 導入企業標準色系，展現專業度。
跨平台一致性： 確保在 Outlook、手機 Webmail 上皆完美呈現。

架構解析：技術三位一體

VBA (自動化引擎)

負責撈取資料庫或 Excel 報表數據，並操控 Outlook 應用程式發送郵件。

HTML (結構骨架)

設計郵件的基礎表格、標題與段落，取代傳統的純文字排版。

CSS (樣式注入)

將色彩、間距與字體大小寫入標籤內，實現金融美學的視覺升級。

「html 寄送郵件工具」操作流程

根據《自動化作業工具操作手冊》規範之標準動作

準備資料

點選並開啟系統產出之 Excel 數據源。

套用範本

輸入主旨，並選擇對應業務的 HTML 範本。

預覽與寄送

顯示寄件內容，確認名單(TO/CC)後透過 Outlook 發送。

實作 1：範本變數化 (Templating)

我們在 HTML 範本中，預留特定的字串標記（如 {{VarName}}），以便 VBA 進行字串替換。

<!-- HTML 範本檔片段 -->
<div class="report-header">
    <h2>自動化帳務通知</h2>
    <p>報表日期：{{ReportDate}}</p>
</div>

<table>
    <tr><td>總交易筆數</td><td>{{TotalCount}}</td></tr>
    <tr><td>異常筆數</td><td>{{ErrorCount}}</td></tr>
</table>

實作 2：VBA 引擎替換邏輯

透過 VBA 的 Replace 函數，將 Excel 擷取的活資料注入到 HTML 骨架中。

' 讀取 HTML 範本檔為字串
Dim htmlBody As String
htmlBody = ReadTextFile("C:\Templates\ReportTemp.html")

' 進行變數替換注入數據
htmlBody = Replace(htmlBody, "{{ReportDate}}", Date)
htmlBody = Replace(htmlBody, "{{TotalCount}}", ws.Range("B2").Value)

' 若異常大於 0，可動態注入警告的 CSS 樣式
If ws.Range("B3").Value > 0 Then
    htmlBody = Replace(htmlBody, "{{ErrorCount}}", _
               "<span style='color:red; font-weight:bold;'>" & ws.Range("B3").Value & "</span>")
End If

核心觀念：為何不用外部 CSS？

為了克服 Outlook、Gmail 等各大郵件客戶端的安全限制，我們必須放棄外部連結或 <style> 標籤，改用行內樣式 (Inline CSS)。

網頁寫法 (易跑版)


<style>
  .title { color: #F25C54; }
</style>
<h1 class="title">標題</h1>

郵件寫法 (最安全)



<h1 style="color: #F25C54; font-family: sans-serif;">
  標題
</h1>

色彩計畫：展現專業信任感

透過標準色系規範，提升報表可讀性與品牌識別。

Coral Red

#F25C54
主色 / 強調異常與重要指標

Warm Sand

#F7E1D7
輔助色 / 區塊背景與表頭區隔

Sunshine

#E9C46A
點綴色 / 狀態標籤與重點底線

Charcoal

#333333
文字色 / 沉穩內文建立專業度

排版結構：化繁為簡的表格

對於報表類郵件，傳統 <table> 仍是最穩定的佈局方式。我們運用 CSS 處理邊距、對齊與斑馬紋，引導主管的視線。

交易別	筆數	總金額 (TWD)	狀態
自動扣款作業	1,245	8,450,000	成功
電文匯出排程	32	1,200,500	需覆核
手續費結轉	850	45,800	成功

實作 3：呼叫 Outlook 物件模型

將組裝好的完美 HTML 字串，賦予給 MailItem 的 HTMLBody 屬性。

Dim OutApp As Object, OutMail As Object
Set OutApp = CreateObject("Outlook.Application")
Set OutMail = OutApp.CreateItem(0)

With OutMail
    .To = "manager@example.com"
    .CC = "team@example.com"
    .Subject = "【系統自動化】每日帳務處理摘要 (" & Date & ")"
    
    ' 關鍵步驟：指定信件內容格式為 HTML
    .HTMLBody = htmlBody 
    
    ' 可選：加入夾檔
    ' .Attachments.Add "C:\Reports\Detail.xlsx"
    
    .Display ' 預覽 (操作手冊步驟 4)
    ' .Send ' 直接寄出
End With

Before：傳統純文字通知

主旨：系統每日帳務通知

長官您好，以下為今日帳務處理結果：

自動扣款作業筆數：1245 總金額：8450000 狀態：成功
電文匯出排程筆數：32 總金額：1200500 狀態：異常(需覆核)
手續費結轉筆數：850 總金額：45800 狀態：成功

請至系統查閱明細。
此為系統自動發送信件，請勿回覆。

痛點：缺乏視覺重點，數字難以快速辨識，質感低落。

After：HTML 格式化報表

系統每日帳務通知 2026/08/30

長官您好，以下為今日核心帳務處理結果摘要：

業務項目	處理筆數	總金額	狀態
自動扣款作業	1,245	$8,450,000	成功
電文匯出排程	32	$1,200,500	需覆核
手續費結轉	850	$45,800	成功

此為自動化工具產製之報表，如需詳情請登入後台系統。

實踐避坑指南

拒絕 Flexbox/Grid

Outlook 桌面版使用 Word 引擎渲染，不支援現代網頁佈局。請乖乖使用 <table> 進行排版。

圖片處理原則

避免使用 Base64 圖片（許多客戶端會阻擋）。建議使用外部絕對路徑 URL，並務必加上 alt 替代文字。

CSS 精簡化

所有樣式寫在 style="..." 內，避免使用複雜的選擇器或假元素 (::before, ::after)。

自動化工具的終極價值

我們撰寫 VBA 程式與 HTML 範本，不僅是為了「寄信」...

效率提昇

將例行性整理報表的時間趨近於零。

資訊降噪

透過色彩美學與表格對齊，降低閱讀者的認知負擔，加速決策。

專業形象

從細節處展現金融從業人員對數據品質與呈現的堅持。

Q & A

感謝聆聽！

現在開始，讓你的自動化郵件不再枯燥乏味。