WebView2自动获取当前页面HTML

本文将详细介绍如何使用WebView2控件在WinForms中获取当前页面的HTML内容，包括必要的准备工作、示例代码以及相关的注意事项。

目录¶

前提条件
获取当前HTML内容的方法
- 方法一：使用 ExecuteScriptAsync 执行JavaScript
- 方法二：使用 CapturePreviewAsync 获取网页截图（不推荐用于HTML内容）
完整示例代码
注意事项
常见问题及解决方法
参考资料
总结

1. 前提条件¶

在开始之前，请确保已经按照以下步骤完成了环境配置：

WebView2 控件已成功添加到 WinForms 项目中：确保在项目中正确集成了 WebView2 控件。
WebView2 运行时已安装：确保系统中安装了 WebView2 运行时。
项目目标框架：建议使用 .NET Framework 4.6.2 及以上，或 .NET Core/5+/6+。

2. 获取当前HTML内容的方法¶

方法一：使用 `ExecuteScriptAsync` 执行JavaScript¶

这是最常用且推荐的方法。通过 ExecuteScriptAsync 方法，可以在WebView2中执行JavaScript代码，获取网页的HTML内容。

步骤概述¶

确保 WebView2 已初始化并完成页面加载。
使用 ExecuteScriptAsync 方法执行 JavaScript 获取 HTML。
处理返回的结果。

示例代码¶

以下是一个详细的示例，展示如何在WinForms应用程序中使用WebView2控件获取当前页面的HTML内容：

using System;
using System.Text.Json;
using System.Threading.Tasks;
using System.Windows.Forms;
using Microsoft.Web.WebView2.WinForms;
using Microsoft.Web.WebView2.Core;

namespace WebView2GetHtmlExample
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
            InitializeAsync();
        }

        private async void InitializeAsync()
        {
            try
            {
                // 初始化 WebView2
                await webView21.EnsureCoreWebView2Async(null);
                
                // 订阅 NavigationCompleted 事件
                webView21.CoreWebView2.NavigationCompleted += CoreWebView2_NavigationCompleted;
                
                // 导航到目标网页
                webView21.CoreWebView2.Navigate("https://www.example.com"); // 替换为目标URL
            }
            catch (Exception ex)
            {
                MessageBox.Show($"WebView2 初始化失败: {ex.Message}", "错误", MessageBoxButtons.OK, MessageBoxIcon.Error);
            }
        }

        private async void CoreWebView2_NavigationCompleted(object sender, CoreWebView2NavigationCompletedEventArgs e)
        {
            if (e.IsSuccess)
            {
                try
                {
                    // 执行JavaScript获取HTML
                    string script = "document.documentElement.outerHTML;";
                    string result = await webView21.CoreWebView2.ExecuteScriptAsync(script);
                    
                    // 解析返回的JSON字符串
                    string htmlContent = JsonSerializer.Deserialize<string>(result);
                    
                    // 显示或处理HTML内容
                    // 例如，显示在文本框中
                    textBoxHtml.Text = htmlContent;
                    
                    // 或者保存到文件
                    // System.IO.File.WriteAllText("page.html", htmlContent);
                    
                    MessageBox.Show("成功获取HTML内容！", "成功", MessageBoxButtons.OK, MessageBoxIcon.Information);
                }
                catch (Exception ex)
                {
                    MessageBox.Show($"获取HTML内容失败: {ex.Message}", "错误", MessageBoxButtons.OK, MessageBoxIcon.Error);
                }
            }
            else
            {
                MessageBox.Show($"导航失败，错误代码: {e.WebErrorStatus}", "错误", MessageBoxButtons.OK, MessageBoxIcon.Error);
            }
        }
    }
}

代码解释¶

初始化 WebView2：
```
await webView21.EnsureCoreWebView2Async(null);
```
确保 WebView2 控件已初始化并准备就绪。

导航到目标网页并订阅 NavigationCompleted 事件：

webView21.CoreWebView2.Navigate("https://www.example.com");
webView21.CoreWebView2.NavigationCompleted += CoreWebView2_NavigationCompleted;

当页面导航完成后，触发 NavigationCompleted 事件。

在 NavigationCompleted 事件处理程序中执行JavaScript：
```
string script = "document.documentElement.outerHTML;";
string result = await webView21.CoreWebView2.ExecuteScriptAsync(script);
```
通过 ExecuteScriptAsync 执行JavaScript代码，获取页面的HTML内容。
解析返回的JSON字符串：
```
string htmlContent = JsonSerializer.Deserialize<string>(result);
```
ExecuteScriptAsync 返回的结果是一个JSON字符串，因此需要反序列化为C#字符串。
显示或处理HTML内容：
```
textBoxHtml.Text = htmlContent;
```
将获取到的HTML内容显示在WinForms的文本框中，或根据需求进行其他处理。

方法二：使用 `CapturePreviewAsync` 获取网页截图（不推荐用于HTML内容）¶

虽然 CapturePreviewAsync 方法可以获取网页的截图，但它不适用于获取HTML内容。它主要用于生成网页的视觉快照，因此不在此详细介绍。

3. 完整示例代码¶

为了更清晰地展示如何在WinForms中使用WebView2获取当前HTML内容，以下是一个完整的示例项目。

步骤1：创建新的WinForms项目¶

打开Visual Studio。
创建新项目：
- 选择 “Windows Forms 应用程序 (.NET Framework)” 或 “.NET Core”，点击 “下一步”。
- 配置项目名称和位置，点击 “创建”。

步骤2：安装WebView2 NuGet包¶

打开NuGet包管理器：
- 右键点击项目，选择 “管理NuGet程序包…”。
搜索并安装Microsoft.Web.WebView2：
- 在 “浏览” 标签下，搜索 Microsoft.Web.WebView2。
- 选择 Microsoft.Web.WebView2 包（由Microsoft发布），点击 “安装”。
- 接受许可协议，等待安装完成。

步骤3：设计界面¶

打开设计器视图：
- 在解决方案资源管理器中，双击 Form1.cs，进入设计器视图。
添加WebView2控件：
- 如果WebView2控件已显示在工具箱中，直接拖放到窗体上。
- 否则，手动添加：
  - 右键点击 “工具箱”，选择 “选择项…”。
  - 在 “.NET Framework 组件” 选项卡中，找到 Microsoft.Web.WebView2.WinForms.WebView2。
  - 勾选该控件，点击 “确定”。
- 将WebView2控件调整为适合窗体的大小。
添加文本框用于显示HTML内容：
- 从工具箱中拖放一个 TextBox 控件到窗体上。
- 设置其 Multiline 属性为 True，并调整大小以显示完整的HTML内容。
- 命名为 textBoxHtml。

步骤4：编写代码¶

Form1.cs

using System;
using System.Text.Json;
using System.Threading.Tasks;
using System.Windows.Forms;
using Microsoft.Web.WebView2.WinForms;
using Microsoft.Web.WebView2.Core;

namespace WebView2GetHtmlExample
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
            InitializeAsync();
        }

        private async void InitializeAsync()
        {
            try
            {
                // 初始化 WebView2
                await webView21.EnsureCoreWebView2Async(null);
                
                // 订阅 NavigationCompleted 事件
                webView21.CoreWebView2.NavigationCompleted += CoreWebView2_NavigationCompleted;
                
                // 导航到目标网页
                webView21.CoreWebView2.Navigate("https://www.example.com"); // 替换为目标URL
            }
            catch (Exception ex)
            {
                MessageBox.Show($"WebView2 初始化失败: {ex.Message}", "错误", MessageBoxButtons.OK, MessageBoxIcon.Error);
            }
        }

        private async void CoreWebView2_NavigationCompleted(object sender, CoreWebView2NavigationCompletedEventArgs e)
        {
            if (e.IsSuccess)
            {
                try
                {
                    // 执行JavaScript获取HTML
                    string script = "document.documentElement.outerHTML;";
                    string result = await webView21.CoreWebView2.ExecuteScriptAsync(script);
                    
                    // 解析返回的JSON字符串
                    string htmlContent = JsonSerializer.Deserialize<string>(result);
                    
                    // 显示HTML内容在文本框中
                    textBoxHtml.Text = htmlContent;
                    
                    // 或者保存到文件
                    // System.IO.File.WriteAllText("page.html", htmlContent);
                    
                    MessageBox.Show("成功获取HTML内容！", "成功", MessageBoxButtons.OK, MessageBoxIcon.Information);
                }
                catch (Exception ex)
                {
                    MessageBox.Show($"获取HTML内容失败: {ex.Message}", "错误", MessageBoxButtons.OK, MessageBoxIcon.Error);
                }
            }
            else
            {
                MessageBox.Show($"导航失败，错误代码: {e.WebErrorStatus}", "错误", MessageBoxButtons.OK, MessageBoxIcon.Error);
            }
        }
    }
}

Form1.Designer.cs

确保 Form1.Designer.cs 文件包含WebView2控件和文本框的初始化代码：

namespace WebView2GetHtmlExample
{
    partial class Form1
    {
        private Microsoft.Web.WebView2.WinForms.WebView2 webView21;
        private System.Windows.Forms.TextBox textBoxHtml;

        /// <summary>
        /// 设计器支持所需的方法 - 不要修改
        /// 使用代码编辑器修改此方法的内容。
        /// </summary>
        private void InitializeComponent()
        {
            this.webView21 = new Microsoft.Web.WebView2.WinForms.WebView2();
            this.textBoxHtml = new System.Windows.Forms.TextBox();
            ((System.ComponentModel.ISupportInitialize)(this.webView21)).BeginInit();
            this.SuspendLayout();
            // 
            // webView21
            // 
            this.webView21.CreationProperties = null;
            this.webView21.DefaultBackgroundColor = System.Drawing.Color.White;
            this.webView21.Location = new System.Drawing.Point(12, 12);
            this.webView21.Name = "webView21";
            this.webView21.Size = new System.Drawing.Size(776, 300);
            this.webView21.TabIndex = 0;
            this.webView21.ZoomFactor = 1D;
            // 
            // textBoxHtml
            // 
            this.textBoxHtml.Anchor = ((System.Windows.Forms.AnchorStyles)((((System.Windows.Forms.AnchorStyles.Top | System.Windows.Forms.AnchorStyles.Bottom) 
                                                                         | System.Windows.Forms.AnchorStyles.Left) 
                                                                         | System.Windows.Forms.AnchorStyles.Right)));
            this.textBoxHtml.Location = new System.Drawing.Point(12, 318);
            this.textBoxHtml.Multiline = true;
            this.textBoxHtml.Name = "textBoxHtml";
            this.textBoxHtml.ScrollBars = System.Windows.Forms.ScrollBars.Vertical;
            this.textBoxHtml.Size = new System.Drawing.Size(776, 120);
            this.textBoxHtml.TabIndex = 1;
            // 
            // Form1
            // 
            this.ClientSize = new System.Drawing.Size(800, 450);
            this.Controls.Add(this.textBoxHtml);
            this.Controls.Add(this.webView21);
            this.Name = "Form1";
            this.Text = "WebView2 获取HTML示例";
            ((System.ComponentModel.ISupportInitialize)(this.webView21)).EndInit();
            this.ResumeLayout(false);
            this.PerformLayout();
        }
    }
}

步骤5：运行应用程序¶

按 F5 运行应用程序。
观察结果：
- WebView2控件会导航到指定的URL（例如 https://www.example.com）。
- 页面加载完成后，HTML内容将显示在下方的文本框中。
- 弹出消息框提示成功获取HTML内容。

4. 注意事项¶

异步编程：
- ExecuteScriptAsync 方法是异步的，因此确保事件处理程序能够正确处理异步操作。
- 使用 async 和 await 关键字来避免阻塞UI线程。
JSON解析：
- ExecuteScriptAsync 返回的是一个JSON字符串，通常是双引号包围的字符串。因此，需要使用 JsonSerializer.Deserialize<string> 或其他JSON解析方法将其转换为C#字符串。
安全性：
- 确保仅在受信任的网页上执行JavaScript代码，以避免潜在的安全风险。
错误处理：
- 添加适当的错误处理机制，捕获和处理可能出现的异常，确保应用程序的稳定性。
性能优化：
- 避免频繁执行大量的JavaScript代码，合理安排获取HTML的时机，以提高应用程序的性能。

5. 常见问题及解决方法¶

问题1：`ExecuteScriptAsync` 返回的HTML内容为空¶

可能原因：

网页还未完全加载时执行脚本。
JavaScript代码有误。

解决方法：

确保在 NavigationCompleted 事件中执行脚本，确保网页已完全加载。
检查并确保JavaScript代码正确无误，例如使用 document.documentElement.outerHTML 获取整个HTML内容。

问题2：获取的HTML内容包含转义字符或额外的引号¶

可能原因：

ExecuteScriptAsync 返回的是JSON字符串，需要正确解析。

解决方法：

使用 JsonSerializer.Deserialize<string>(result) 或其他JSON解析方法，将返回的JSON字符串转换为C#字符串。

问题3：WebView2控件未初始化¶

可能原因：

WebView2运行时未安装。
未正确调用 EnsureCoreWebView2Async 方法。

解决方法：

确认WebView2运行时已正确安装。
确保在使用WebView2控件前，调用了 EnsureCoreWebView2Async 方法并等待其完成。

问题4：WebView2导航失败或加载错误¶

可能原因：

网络连接问题。
URL格式不正确。
网站本身存在问题。

解决方法：

检查网络连接。
确保URL以 http:// 或 https:// 开头，并且格式正确。
尝试访问其他网站，确认是否为特定网站的问题。

6. 参考资料¶

7. 总结¶

在WinForms应用程序中集成WebView2控件并获取当前网页的HTML内容，是实现网页数据交互和自动化处理的重要手段。通过使用 ExecuteScriptAsync 方法，可以轻松地从网页中提取HTML内容，并在应用程序中进行进一步处理。

关键要点：

正确安装和配置WebView2控件：确保项目中已正确引用 Microsoft.Web.WebView2 NuGet包，并安装了WebView2运行时。
异步操作的正确处理：使用 async 和 await 确保WebView2控件已初始化并完成页面加载后再执行脚本。
JSON解析：理解 ExecuteScriptAsync 返回的结果格式，正确解析JSON字符串获取所需内容。
错误处理和日志记录：添加适当的错误处理机制，捕获和处理可能出现的异常，提升应用程序的稳定性。
性能优化：合理安排获取HTML的时机，避免不必要的性能开销。

本文籍由我们多年业内实际经验，在AI工具辅助下完成。
如果您需要深入了解相关信息，或者您有任何其他意见建议，请给我们留言，我们将尽快与您联系。

WebView2自动获取当前页面HTML

目录¶

1. 前提条件¶

2. 获取当前HTML内容的方法¶

方法一：使用 ExecuteScriptAsync 执行JavaScript¶

步骤概述¶

示例代码¶

代码解释¶

方法二：使用 CapturePreviewAsync 获取网页截图（不推荐用于HTML内容）¶

3. 完整示例代码¶

步骤1：创建新的WinForms项目¶

步骤2：安装WebView2 NuGet包¶

步骤3：设计界面¶

步骤4：编写代码¶

步骤5：运行应用程序¶

4. 注意事项¶

5. 常见问题及解决方法¶

问题1：ExecuteScriptAsync 返回的HTML内容为空¶

问题2：获取的HTML内容包含转义字符或额外的引号¶

问题3：WebView2控件未初始化¶

问题4：WebView2导航失败或加载错误¶

6. 参考资料¶

7. 总结¶

方法一：使用 `ExecuteScriptAsync` 执行JavaScript¶

方法二：使用 `CapturePreviewAsync` 获取网页截图（不推荐用于HTML内容）¶

问题1：`ExecuteScriptAsync` 返回的HTML内容为空¶