实现 “WebView2 获取word选中内容

发布于:2025-06-24 ⋅ 阅读:(17) ⋅ 点赞:(0)

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 页展示选中内容(或用于其他用途)


网站公告

今日签到

点亮在社区的每一天
去签到