四.Winform使用Webview2加载本地HTML页面并互相通信

本文介绍了如何在C#Winform中使用Webview2加载本地HTML页面,并实现在C#与HTML页面之间的双向通信,包括刷新按钮触发的页面刷新和HTML按钮点击调用Winform代码更新按钮字体。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Winform使用Webview2加载本地HTML页面并互相通信

往期目录

往期相关文章目录
专栏目录

本节目标

  • 实现刷新按钮
  • 点击 C# winform按钮可以调用C# winform代码显示到html上
  • 点击HTML按钮可以调用C# winform代码更改html按钮字体

核心代码

  • C# -> html
	this.mainView2.ExecuteScriptAsync("调用方(发送消息..)");
  • html->C#
    • 确保mainView2的CoreWebView2异步初始化完成
this.mainView2.EnsureCoreWebView2Async(null);
    • 在webview2的CoreWebView初始化之后设置属性
	//coreWebview2完成时发生。在完成时进行一系列设置。
	this.mainView2.CoreWebView2InitializationCompleted += (object sender, CoreWebView2InitializationCompletedEventArgs e)=>{
   
    this.mainView2.CoreWebView2.Settings.IsScriptEnabled = true; 
}
    • 在coreWebview2完成时添加WebMessageReceived监听。如下代码。
     this.mainView2.CoreWebView2InitializationCompleted += (object sender, CoreWebView2InitializationCompletedEventArgs e) => {
   
     this.mainView2.CoreWebView2.Settings.IsScriptEnabled = true;
     this.mainView2.CoreWebView2.WebMessageReceived += CoreWebView2_WebMessageReceived;
 };
    • 实现接受方法
/// <summary>
/// 页面发送消息时,后台接受信息
/// </summary>

private void CoreWebView2_WebMessageReceived(
首先,需要在项目中添加 WebView2 和 pdf.js 的引用。 1.WinForm 中添加 Webview2 控件: - 在 Visual Studio 中打开 WinForm 项目。 - 在 “工具箱” 中找到 “WebView2” 控件,将其拖到窗体上。 2. 使用 WebView2 控件加载 pdf.js: - 在窗体上添加一个按钮,命名为 “Load PDF”。 - 在按钮的 Click 事件中,使用 WebView2 控件加载 pdf.js: ```csharp private async void btnLoadPDF_Click(object sender, EventArgs e) { await webView21.EnsureCoreWebView2Async(); // 加载 pdf.js string html = $@" <html> <head> <script src=""{Application.StartupPath}\pdfjs-dist\build\pdf.js""></script> </head> <body> <div style=""position: absolute; top: 0; left: 0; right: 0; bottom: 0;""> <canvas id=""pdfCanvas""></canvas> </div> <script> // 加载 PDF 文件 pdfjsLib.getDocument('{Application.StartupPath}\sample.pdf').promise.then(function(pdf) { // 获取第一页渲染 pdf.getPage(1).then(function(page) { var canvas = document.getElementById('pdfCanvas'); var context = canvas.getContext('2d'); var viewport = page.getViewport({ scale: 1.0 }); canvas.width = viewport.width; canvas.height = viewport.height; var renderContext = { canvasContext: context, viewport: viewport }; page.render(renderContext); }); }); </script> </body> </html>"; webView21.CoreWebView2.NavigateToString(html); } ``` 以上代码中,我们使用了 pdf.js 的 API 加载了一个名为 “sample.pdf” 的 PDF 文件,将其渲染到一个名为 “pdfCanvas” 的 Canvas 元素中。 注意:在使用 pdf.js 渲染 PDF 文件时,需要使用 Canvas 元素来显示 PDF 内容。 3. 运行程序,点击 “Load PDF” 按钮,即可看到加载渲染出了 PDF 文件的第一页。 以上就是使用 WebView2 控件和 pdf.js 来显示 PDF 文件的示例代码。需要注意的是,以上代码只是一个示例,实际使用时还需要对代码进行适当的修改和优化。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值