IE WebBrowser 控件五大實用技巧：背景音樂、Flash、Office/PDF 文檔、自動排版列印、美觀輸入介面

核心觀念

「沒有做不到，只有想不到」 — 凡 IE 能呈現的內容 (HTML、圖片、Flash、Office 文檔、PDF、XML、SVG…)，內嵌 WebBrowser 控件的應用程式皆可複用，無需自行解析渲染。

環境建置 (VC6 MFC 對話式)

1. 新專案 → MFC AppWizard (exe) → Dialog based，勾選 ActiveX Controls。
2. 專案 → 加入至專案 → 元件與控件 → Registered ActiveX Controls → Microsoft Web Browser → Insert，產生 CWebBrowser2 包裝類。
3. 對話方塊編輯器拖放控件，ClassWizard 映射變數 m_ie (型別 CWebBrowser2)。

五大技巧詳解

1. 播放背景音樂 / 顯示 Flash / 圖片

撰寫 HTML 字串內嵌 <bgsound>、<embed src="xxx.swf">、<img>，呼導 Navigate2("about:blank") 後用 IPersistStreamInit::Load 載入 (參考文章 8474 技巧一)，或存為暫存 .htm 檔 Navigate2("file://...")。

2. 顯示 Word / Excel / PDF 文檔

• 機器已安裝 Office/Adobe Reader → IE 擁有對應 ActiveX 文檔伺服器。
• 直接 m_ie.Navigate2(_T("C:\\Doc\\Report.doc"))，控件自動就地啟動 Word/Excel/Reader 顯示。
• 同理支援 .xls, .ppt, .pdf, .txt, .rtf 等所有 IE 關聯類型。

3. 自動排版列印

呼叫 ExecWB 執行 OLECMDID_PRINT / OLECMDID_PRINTPREVIEW / OLECMDID_PAGESETUP：

// 列印預覽
m_ie.ExecWB(OLECMDID_PRINTPREVIEW, OLECMDEXECOPT_DONTPROMPTUSER, NULL, NULL);
// 直接列印
m_ie.ExecWB(OLECMDID_PRINT, OLECMDEXECOPT_DONTPROMPTUSER, NULL, NULL);
// 頁面設定
m_ie.ExecWB(OLECMDID_PAGESETUP, OLECMDEXECOPT_DONTPROMPTUSER, NULL, NULL);

ExecWB 共支援 30+ 命令 (儲存、複製、全選、屬性…)，詳見 MSDN OLECMDID 列舉。

4. 攔截導航 / 提取表單資料 (OnBeforeNavigate2)

重載 CHtmlView::OnBeforeNavigate2 (或沉連 DWebBrowserEvents2::BeforeNavigate2)：

void CMyView::OnBeforeNavigate2(LPCTSTR lpszURL, DWORD nFlags,
                                LPCTSTR lpszTargetFrameName, CByteArray& baPostedData,
                                LPCTSTR lpszHeaders, BOOL* pbCancel)
{
    // 1. 導航重導向
    if (_tcsstr(lpszURL, _T("blocked.com"))) { *pbCancel = TRUE; return; }

    // 2. 提取 POST 資料 (baPostedData 為安全陣列)
    if (baPostedData.GetSize() > 0)
    {
        CString strPost((char*)baPostedData.GetData(), baPostedData.GetSize());
        // 解析 application/x-www-form-urlencoded ...
    }
}

5. 美觀使用者輸入介面 (HTML 樣板 + External 物件)

• 設計 HTML 表單作為輸入介面 (CSS 排版、驗證、動畫)，載入控件。
• 實作 IDocHostUIHandler::GetExternal 暴露 C++ 物件給 window.external。
• HTML/JS 呼叫 window.external.SaveData(jsonStr) 回傳資料，C++ 解析 JSON 入庫。
• 比傳統 MFC Dialog 更彈性、易維護、支援換膚。

執行畫面

擴充建議

• 將常用 HTML 樣板內嵌專案資源 (res:// 協議)，免散佈檔案。
• 搭配 ShowHTMLDialogEx 實現 HTML 模態對話框 (參考文章 8474)。
• 善用 DocumentComplete 事件確認載入完成後再操作 DOM。

結語

內嵌 WebBrowser 控件 = 擁有 IE 完整渲染引擎 + ActiveX 文檔伺服器 + 腳本引擎 + DOM API。善用它能以極低成本實現富媒體、文檔檢視、排版列印、現代化 UI 等高階功能。

本文配套 VC6 MFC 範例專案可供下載。