当前位置：首页 > news >正文

实现 “WebView2 获取word选中内容

news 来源：原创 2025/6/24 15:36:06

1、主动

在 VSTO（Word 外接程序）中，你可以通过监听 Word 的选中事件，并主动把选中的内容传给 WebView2。WebView2 无法**主动访问** Word 的选中内容（它是独立运行的浏览器内核），所以需要在宿主控件（`UcWordAiTaskPane`）中**通过 C# 代码推送选中内容给 WebView2**。### ✅ 实现思路如下：---### 🧩 第一步：监听 Word 的选中变化（SelectionChange）在 `ThisAddIn.cs` 中注册事件：```csharp
private void ThisAddIn_Startup(object sender, System.EventArgs e)
{this.Application.WindowSelectionChange += Application_WindowSelectionChange;
}
```---### 🧩 第二步：处理选中变化，获取选中文本，并传给 Uc 控件```csharp
private void Application_WindowSelectionChange(Word.Selection Sel)
{string selectedText = Sel?.Text ?? "";// 找到当前任务窗格中的控件（你可能要根据文档或窗口关联获取正确的控件）foreach (CustomTaskPane pane in Globals.ThisAddIn.CustomTaskPanes){if (pane.Control is UcWordAiTaskPane uc && pane.Visible){uc.SendSelectedTextToWebView(selectedText);}}
}
```---### 🧩 第三步：`UcWordAiTaskPane` 中定义方法，将内容传给 WebView2```csharp
public void SendSelectedTextToWebView(string text)
{string js = $"window.dispatchEvent(new CustomEvent('wordSelectionChanged', {{ detail: {System.Text.Json.JsonSerializer.Serialize(text)} }}));";webView21.ExecuteScriptAsync(js);
}
```这样，WebView2 页面内就能监听 `wordSelectionChanged` 事件来处理：---### 🧩 第四步：WebView2 中 JavaScript 监听事件```html
<script>
window.addEventListener("wordSelectionChanged", (e) => {const text = e.detail;console.log("选中的文本：", text);// 你可以做进一步的处理，如显示、分析、发送到服务器等
});
</script>
```---### ✅ 整体流程总结：1. Word 中选中内容 => 触发 `WindowSelectionChange`
2. C# 获取选中内容 => 调用 WebView2 的 JS（通过 `ExecuteScriptAsync`）
3. JS 中监听事件并处理内容---如你还想支持**点击按钮刷新当前选中内容**，也可以通过按钮触发：```csharp
var text = Globals.ThisAddIn.Application.Selection.Text;
uc.SendSelectedTextToWebView(text);
```

2、被动

## ✅ 实现方案概览1. WebView2 中的网页按钮点击后，用 `window.chrome.webview.postMessage()` 向宿主发送请求。
2. VSTO C# 端在 `WebMessageReceived` 事件中捕获消息，获取 Word 当前选中的文本。
3. 用 `ExecuteScriptAsync` 把选中的文本返回给 WebView2 页面。---## 🧩 步骤一：Web 页面代码（嵌入 WebView2）```html
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>AI 文档助手</title>
</head>
<body><button id="getSelectionBtn">获取 Word 选中内容</button><pre id="output"></pre><script>// 点击按钮向 VSTO 发消息document.getElementById('getSelectionBtn').addEventListener('click', () => {window.chrome.webview.postMessage({ type: "getSelection" });});// 接收来自 VSTO 的响应window.addEventListener("wordSelectionChanged", (e) => {document.getElementById("output").textContent = e.detail;});</script>
</body>
</html>
```---## 🧩 步骤二：C# 中注册 WebView2 的消息监听事件在 `UcWordAiTaskPane.cs` 中添加如下逻辑：```csharp
public partial class UcWordAiTaskPane : UserControl
{public UcWordAiTaskPane(){InitializeComponent();webView21.CoreWebView2InitializationCompleted += WebView21_CoreWebView2InitializationCompleted;}private void WebView21_CoreWebView2InitializationCompleted(object sender, CoreWebView2InitializationCompletedEventArgs e){if (webView21.CoreWebView2 != null){webView21.CoreWebView2.WebMessageReceived += CoreWebView2_WebMessageReceived;}webView21.CoreWebView2.Navigate("your_local_or_embedded_page.html");}private void CoreWebView2_WebMessageReceived(object sender, CoreWebView2WebMessageReceivedEventArgs e){var message = e.WebMessageAsJson;// 简单判断消息类型if (message.Contains("\"type\":\"getSelection\"")){string selectedText = Globals.ThisAddIn.Application.Selection?.Text ?? "";SendSelectedTextToWebView(selectedText);}}public void SendSelectedTextToWebView(string text){// 发送事件回网页，传回选中内容string escaped = System.Text.Json.JsonSerializer.Serialize(text); // 自动处理引号等string js = $"window.dispatchEvent(new CustomEvent('wordSelectionChanged', {{ detail: {escaped} }}));";webView21.ExecuteScriptAsync(js);}
}
```---## ✅ 效果
* Web 页点击按钮 ➜ 向宿主请求选中内容
* 宿主获取 Word 的选中文本 ➜ 回传给 Web 页
* Web 页展示选中内容（或用于其他用途）