使用CefSharp可以在.NET輕松的嵌入Html，不用擔心WPF與Winform 控件與它的兼容性問題，CefSharp大部分的代碼是C#，它可以在VB或者其他.NET平台語言中來進行使用。
近幾天來，公司項目中需要使用WebBrowser,其中考慮了幾個控件，如1.Winform中的WebBrowser 2.WPF中的WebBrowser 3.WebKit.Net 4.CefSharp
Winform的WebBrowser放到項目中進行了實驗和處理，發現致命問題：AllowsTransparency = true 和 Webbrowser 等內置窗體顯示沖突，導致不發選擇，還有就是GC回收不及時，一下子就飆到了100MB+.
后來考慮WPF的webbrowser 它實際上還是封裝了Winform，有個嚴重的問題就是它一直置頂到最頂層，so，無法選擇。
再后來考慮WebKit.Net ，但發現已經N多年沒有更新，所以不在考慮...
最后跌跌撞撞跑到CefSharp，發現非常的坑啊！！竟然不支持AnyCPU，關鍵是我的項目中有的功能是必須AnyCpu啟動的啊！還好，官方在去年已經公布了支持AnyCpu的方法。
首先Nuget引用cefsharp.WPF,它會自己引用Common，其他不用管。我們還需要再App.xaml.cs中添加代碼來支持AnyCpu。
public partial class App : Application { public App() { //Add Custom assembly resolver
AppDomain.CurrentDomain.AssemblyResolve += Resolver; //Any CefSharp references have to be in another method with NonInlining // attribute so the assembly rolver has time to do it's thing.
InitializeCefSharp(); } [MethodImpl(MethodImplOptions.NoInlining)] private static void InitializeCefSharp() { var settings = new CefSettings(); // Set BrowserSubProcessPath based on app bitness at runtime
settings.BrowserSubprocessPath = Path.Combine(AppDomain.CurrentDomain.SetupInformation.ApplicationBase, Environment.Is64BitProcess ? "x64" : "x86", "CefSharp.BrowserSubprocess.exe"); // Make sure you set performDependencyCheck false
Cef.Initialize(settings, performDependencyCheck: false, browserProcessHandler: null); } // Will attempt to load missing assembly from either x86 or x64 subdir // Required by CefSharp to load the unmanaged dependencies when running using AnyCPU
private static Assembly Resolver(object sender, ResolveEventArgs args) { if (args.Name.StartsWith("CefSharp")) { string assemblyName = args.Name.Split(new[] { ',' }, 2)[0] + ".dll"; string archSpecificPath = Path.Combine(AppDomain.CurrentDomain.SetupInformation.ApplicationBase, Environment.Is64BitProcess ? "x64" : "x86", assemblyName); return File.Exists(archSpecificPath) ? Assembly.LoadFile(archSpecificPath) : null; } return null; } private void Application_Startup(object sender, StartupEventArgs e) { } }
還沒完，之后你得在你項目的 *.csproj 中添加一行配置，它是在你的第一個PropertyGroup中添加的。
最后一步，在App.config中配置x86，當然不是說不支持CPU，剛剛App.xaml.cs中我們已經修改了啊。
<configuration> <runtime> <assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1"> <probing privatePath="x86"/> </assemblyBinding> </runtime>
</...>
就現在我們在頁面中添加一個CefSharpBrowser在grid中，您需要在容器空間中添加name 標記。
public static ChromiumWebBrowser cefSha { get; set; } public Visualization() { InitializeComponent(); } private void Page_Loaded(object sender, RoutedEventArgs e) { cefSha = new ChromiumWebBrowser(Environment.CurrentDirectory + "/../../Pages/STORE/VisualizationHtml/StoreData.html"); // 頁面加載完畢后打開開發者工具
cefSha.KeyboardHandler = new CEFKeyBoardHander(); CefSharpSettings.LegacyJavascriptBindingEnabled = true; NewMutliPage(); this.grid.Children.Add(cefSha);//初始化
}
前后端交互都是在NewMutliPage中搭起的橋梁，該代碼是新版本的配置方式，大概是18年底，前后端的鈎子可以通過bound來偷取。
public void NewMutliPage() { cefSha.JavascriptObjectRepository.ResolveObject += (s, eve) => { var repo = eve.ObjectRepository; if (eve.ObjectName == "bound") { repo.Register("bound", new JsEvent(), isAsync: true, options: new BindingOptions() { CamelCaseJavascriptNames = false }); } }; }
老版本你可以這么配置前后端交互的橋梁。
public void OldSinglePage() { // 新版本默認為 false
CefSharpSettings.LegacyJavascriptBindingEnabled = true; // 把 TestClass 注入到單個頁面，名稱為 test
_chromiumWebBrowser.RegisterJsObject("testold", new TestClass()); }
LegacyJavascriptBindingEnabled 該屬性就是讓WebBrowser與WPF支持js交互，否則不可以建立jsObject 這個對象。
在 RegisterJsObject 中我們是綁定的類，該類中是我們后台向WebBrowser的所有數據方法。
public class JsEvent { /// <summary> /// 根據貨架列代碼區查相關信息 /// </summary> /// <param name="Sline_code"></param> public void GetobjBySline_Code(string Sline_code) { Visualization.cefSha.ExecuteScriptAsync($@"getgoods({ Newtonsoft.Json.JsonConvert.SerializeObject(VisualizationDAL.GetList(Sline_code))});"); } /// <summary> /// 獲取貨架信息 /// </summary> /// <param name="Sline_code"></param> public void GetShelveDetail(string Sline_code) { //1.找到那列的所有貨架 ObservableCollection<STORE_SHELVE> shelveList = XDAL.STORE_SHELVE_DAL.GetListByLineName(Sline_code); //2.找到關於該列下所有的商品信息 ObservableCollection<STORe_DetailVm> detailList = new ObservableCollection<STORe_DetailVm>(); foreach (var item in shelveList) { XDAL.STORE_goods_Detail.GetGoodsDetail(item.Shelve_code).ToList().ForEach(obj => { detailList.Add(obj); }); } #region List<VisualShelveVm> VisualList = new List<VisualShelveVm>(); for (int i = 0; i < shelveList.Count; i++) { //循環最大粒子，在這個最大粒子當中來組織Json for (int g = 0; g < 4; g++) { for (int l = 0; l < 4; l++) { var store_detail = detailList.FirstOrDefault(a => a.grid == g.ToString() && a.Shelve_code == shelveList[i].Shelve_code && a.layer == l.ToString()); //如果未出庫的里沒有這個 那就可以添加 if (store_detail != null) { VisualList.Add(new VisualShelveVm() { shelve_grid = g.ToString(), shelve_layer = l.ToString(), shelve_code = shelveList[i].Shelve_code, shelve_name = shelveList[i].Shelve_name, isHas = true, goods_code = store_detail.Goods_code, goods_name = store_detail.Goods_name }); } else { VisualList.Add(new VisualShelveVm() { isHas = false, shelve_grid = g.ToString(), shelve_layer = l.ToString(), }); } } } } #endregion Visualization.cefSha.ExecuteScriptAsync($@"GetShelve({Newtonsoft.Json.JsonConvert.SerializeObject(VisualList)});"); }
需要注意的是該代碼塊的最后一行，這是我們用前端方法的方式，Visualization是我們剛才的頁面，我們直接調用靜態CefSha然后執行它的異步方法，其中是直接執行的Js，它和Wpf自帶的WebBrowser還不一樣，微軟的WebBrowser是高度封裝的，而cefsha是高度開源的，這一塊不得不贊了。
前台如何請求后台呢？首先在頁面加載的時候配置下bound對象。
<script> window.onload = function () { loadScrollWidth(2); // 新式注入 CefSharp.BindObjectAsync("bound"); } </script>
隨后我們就可以通過bound這個對象來請求后台了
bound.GetobjBySline_Code(Sline_Code);
就以我來說，千萬不要拿Jquery和Vue一起用，真的是太糟心了..
<body>
<div class="container" id="app" style="max-width: 1600px;">
<div class="row">
<div class="col-lg-3">
<div class="card">
<h3 class="card-img-top headtext">清單</h3>
<div class="card-body">
<table class="table table-striped">
<thead>
<tr>
<th scope="col">分類名稱</th>
<th scope="col">數量</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in goods_item">
<th scope="row">{{item.goods_Name}}</th>
<td>{{item.num}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-lg-9" style="overflow: scroll;">
<div class="row line_div">
<div class="row" style="font-size: 20px;background-color: #CCC;width: 100%;">
<ul class="nav nav-pills nav-fill" id="nav_list">
<li class="nav-item" v-for="(item,index) in line_item">
<!-- 如果 index 1-->
<a class="nav-link active" key="item.Sline_code" @click="toggle(index,item)" v-if="index==0">{{item.Sline_name}}</a>
<!-- index 2 n -->
<a class="nav-link" key="item.Sline_code" @click="toggle(index,item)" v-if="index!=0">{{item.Sline_name}}</a>
</li>
</ul>
</div>
<div class="row" style="margin-left: 0;" id="VisualBody">
<div class="colums" v-for="item in reversedMessage">
<div class="row">
<img src="tx_3.png">
<div class="table_div">
<table class="custormTable" style="margin-top: 40px;" :id="item.code">
</table>
</div>
</div>
<div class="row"
style="background-image: url('tx_2.png');width: 556px;height:464px;background-repeat: repeat-y;">
</div>
<div class="row">
<img src="tx_1.png">
<div class="hj_center">
<h3>{{item.name}}</h3>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
window.onload = function () {
loadScrollWidth(2);
// 新式注入
CefSharp.BindObjectAsync("bound");
}
</script>
<script>
function loadScrollWidth(num) {
var tags = document.getElementsByClassName('line_div')[0];
tags.style.width = num * 590 + 'px';
}
function changedom(listdata,shelvedata) {
var num = 1;
$(".custormTable").html("");
shelvedata.shift();
for (var i = 0; i < shelvedata.length; i++) {
var shelve_code = shelvedata[i].shelve_code;
//不管如何都是循環4X4
for (var y = 0; y < 4; y++) {
var goodshtml = '<tbody><tr class="store_goodsName">';
var numhtml = '<tr class="store_goodsId">'
numhtml += "<td>" + num + "</td>";
numhtml += "<td>" + (num + 1) + "</td>";
numhtml += "<td>" + (num + 2) + "</td>";
numhtml += "<td>" + (num + 3) + "</td>";
numhtml = numhtml + '</tr>';
for (var g = 0; g < 4; g++) {
var obj = listdata.find(item => item.shelve_layer == y && item.shelve_grid == g && item.shelve_code == shelve_code);
if (obj != null) {
if (obj.isHas == true) {
goodshtml = goodshtml + "<td>" + obj.goods_name + "</td>";
}
} else {
goodshtml = goodshtml + "<td></td>";
}
}
goodshtml = goodshtml + '</tr>' + numhtml + '</tbody>';
var my_element = $("#" + shelve_code);
$("#" + shelve_code).append(goodshtml);
num = num + 4;
}
}
}
</script>
</html>
<script>
var app = new Vue({
el: "#app",
data: {
m: "hello",
line_item: [],//列
goods_item: [],//商品列表+num
shelve_list: [],//貨架列表
Listdata: [],//商品列表
},mounted() {
//全局鈎子引用
window.getalert = this.getalert;
window.getgoods = this.getgoods;
window.GetShelve = this.GetShelve;
window.DBTwo = this.DBTwo;
},methods: {
getalert: function (list) {
this.line_item = typeof list == 'string' ? JSON.parse(list) : list;
},toggle:function(index,item){
$(".nav-item a").each(function () {
$(this).removeClass("active");
});
$(".nav-item a").eq(index).addClass('active');
//item 對象 Sline_Code 【字段】
var Sline_Code = item.Sline_code;
//調用完之后C#會找我們的一個方法然后將參數帶過來
bound.GetShelveDetail(Sline_Code);
//請求后台，讓后台直接調用一個方法去加載列表。
bound.GetobjBySline_Code(Sline_Code);
this.Wecas(index, item);
},Wecas: function (index, item) {
$(".nav-item a").each(function () {
$(this).removeClass("active");
});
$(".nav-item a").eq(index).addClass('active');
//item 對象 Sline_Code 【字段】
var Sline_Code = item.Sline_code;
//調用完之后C#會找我們的一個方法然后將參數帶過來
bound.GetShelveDetail(Sline_Code);
//請求后台，讓后台直接調用一個方法去加載列表。
bound.GetobjBySline_Code(Sline_Code);
},getgoods: function (goods_list) {
//該方法是返回貨架有的物品
this.goods_item = typeof goods_list == 'string' ? JSON.parse(goods_list) : goods_list;
}, GetShelve: function (list) {
this.Listdata = list;
let obj = {};
list = list.reduce((cur, next) => {
obj[next.shelve_code] ? "" : obj[next.shelve_code] = true && cur.push(next);
return cur;
}, []);
this.shelve_list = typeof list == 'string' ? JSON.parse(list) : list;
changedom(this.Listdata, this.shelve_list);
}
}, computed: {
//所有的貨架列出來
reversedMessage: function () {
var array = [];
for(var i=0;i<this.shelve_list.length;i++){
//判斷是否name是不是有
if (this.shelve_list[i].shelve_name != null) {
var obj = {
name: this.shelve_list[i].shelve_name,
code : this.shelve_list[i].shelve_code
}
array.push(obj);
}
}
if (array.length < 2) {
loadScrollWidth(2);
} else {
loadScrollWidth(array.length);
}
return array;
}
}
});
</script>
前后端交互最好是前端請求后端，然后讓后端執行前端的Js帶上參數。
需要注意的cefsharp初次調用js的是 cefSha.ExecuteScriptAsyncWhenPageLoaded($"getalert({str});"); 我也是醉
還有就是在開發中一定想要F12 看看代碼運行狀況如何或者要調試。
class CEFKeyBoardHander : IKeyboardHandler { public bool OnKeyEvent(IWebBrowser browserControl, IBrowser browser, KeyType type, int windowsKeyCode, int nativeKeyCode, CefEventFlags modifiers, bool isSystemKey) { if (type == KeyType.KeyUp && Enum.IsDefined(typeof(Keys), windowsKeyCode)) { var key = (Keys)windowsKeyCode; switch (key) { case Keys.F12: browser.ShowDevTools(); break; } } return false; } public bool OnPreKeyEvent(IWebBrowser browserControl, IBrowser browser, KeyType type, int windowsKeyCode, int nativeKeyCode, CefEventFlags modifiers, bool isSystemKey, ref bool isKeyboardShortcut) { return false; } }
ok就這樣·~效果圖
2019/8/27 更新 cefsharp調用后台C#代碼中 有操作UI的 則需要
public void Show(string Code) { App.Current.Dispatcher.Invoke((Action)(() => { 。。。。。。。。。 } }