• Chrome谷歌浏览器加载ActiveX控件之allWebDesktop控件介绍

     背景

            allWebDesktop控件是一款方便用户在线打开各类文档的OA办公控件。它设计比较轻巧，充分利用计算机程序资源打开文档，并将程序窗口嵌入到allWebDesktop控件区域内，从而实现浏览器内打开各类文档效果。

            allWebPlugin中间件是一款为用户提供安全、可靠、便捷的浏览器插件服务的中间件产品，致力于将浏览器插件重新应用到所有浏览器。它不仅可以实现ActiveX控件在现代浏览器上使用，而且集成也非常方便。

    alWebPlugin中间件核心优势

    1、自创定位算法，实现插件与页面布局无缝衔接，极致用户体验。
    2、自创插件接口调用方法，保持原汁原味的接口调用及事件响应方式，轻松实现OA系统升级改造。
    3、支持同一页面或不同页面同时加载多个插件，适应各种复杂应用场景。
    4、自主创新、安全可控，不受浏览器插件技术限制，支持更多浏览器（谷歌、火狐、Edge、360浏览器等）。
    5、创新沙箱机制,隔离插件与浏览器运行环境，增强插件与浏览器稳定性和安全性。
    6、攻克诸多技术难点，实现插件不修改、不注册也能使用，极大的降低插件开发量和维护量。

    准备工作

    1、下载allWebPlugin中间件产品，具体如下：

    链接：百度网盘 请输入提取码 
    提取码：z3q0 

    如下图所示，下载allWebPlugin_x86_v2.0.0.24_alpha_20241028.zip安装包。

    软件包下载

    运行效果

            运行效果如下图所示：

    allWebDesktop控件打开Word文档
    allWebDesktop控件打开PDF文档

     

    allWebPDesktop控件打开JT文档

    集成代码 

     allWebPlugin中间件集成步骤

    第一步：导入js相关文件

    导入jquery.min.js，allWebPlugin.Common.js，allWebPlugin.UI.js文件。

    1.  <script type="text/javascript" src="js/jquery.min.js">script>
    2.  <script type="text/javascript" src="js/allWebPlugin.Common.js">script>
    3.  <script type="text/javascript" src="js/allWebPlugin.UI.js">script>

    第二步：替换页面元素代码

    将网页中元素替换成元素。如下图所示：

    1. <td  align="left">
    3. <canvas id="pluginUI" width="600" height="300">
    4. <p class="error">Sorry, It looks as though your browser does not support the canvas tag.p>
    5. canvas>
    6. td>

    第三步：拷贝控件创建方法

    拷贝控件创建方法CreateContainer及CreatePlugin，将其放到网页onload事件里面，方便页面加载时，创建控件对象。其中createProxyPlugin方法创建控件对象，需要传入控件的classid或者ProgID。

    1.  var allWebDesktop;
    2.  var hostCnt = null;
    3. function init(){   
    4. 	CreateContainer();
    5. }
    6.  
    7. function CreateContainer(){
    8. 	var canvas = document.getElementById('pluginUI');
    9. 	var license = "1q1Sc/tJ1FY2I0gjyovEBlL5O+XF5WrNG0Aq8HHaqVcms51Cl0VS4bYdxltvoHzOdQDEmT8XQhfQhaGxcNiqLQ7oiY85BP8ZsOWCPD3ZYQ5mr14faRu6F8yxXVpgkOeRRlN4clA0lwQi3c0+X/Tvd7BRJKX9uDxkShM9orLUJA119NS++hnfEOcexzvMhL2FWjkNGa2ufV2WjC1M8hbdQSr7uy8b2H7Fiz/HMiWYEFmAnrjDytIx4njwJtO7GYCBKYIE1VGI7iWq9iz4XCIKk1sp1hje01FJCtYPj51+uHfLuWWKatvlFHzSb2IMOSpzAAAA8AEAAQMCTeMq4Dd1nDTk0VXbvFd/Yei0Ojtv60nU4n3yDQuFlxUPwKCQDmQifomaE8DZQR8bEhucH7wk2cabDLm4KCi+wUGvsoKR5r83cLSNLWtaRVtbPoWwMgpFnTmlMtnXrRvPjLx+l/UWPbMMuu9ObsWUU7kdG2mEJRyAFHvRqI+G5Zz8oSets7FNwxdwS2trEiCV4qsAkci3oWhu0ddb02uHzEyOg6sjqKLd9XfKYp4NGdWraSFUYhBsiU7LajQNwmlAeEXWnuNnT5XzoP4icvfojjZZjzw6Ar40ldB7kd9gLDsryZWfwDFsObrXeb9VRVHi8yJ9E17zXMLtpTjtBiIzsQABAYICCgGCMOohm/ugukXrQrv9ulJbVqBTGph9ScEeDPMd5ll5a+dDkRDGlb74ZElzA2gcCi9Xn+FtdXTegKWXRUH5ea5xKhN/6eZgBGL4isdUwaclkKUdq1k60BDQgbvrIx2aRt+io7NnbVJortQQpPWpy/jzQV/aFu+PB/PWwdt/wBHfqgXQw7a1R99EaK6VLtrP7PUURODEIRGk+lP+rFD08z6O/wIXk722B87lfRh+gBoRvhRchXcvlvhqBC3OM7XEBbDLgcvHQvYzm67qxcWvSNJnub+9YxB/7eYR3sE8iJ+h9sfkNE7BYeQ0HwyQpIfCp+3s7nWn8nHBOtbx2Vf5sFBaxHYAAAEOAAAAAUFXUEY=";	
    10. 	var installPackageUrl = "http://127.0.0.1:6651/install/allwebPlugin_x86_v2.0.1.16_20240806.exe";
    11. 	var installPackageVersion = "2.0.0.20";	
    12. 	hostCnt = new PluginHostCnt();
    13. 	if(hostCnt.IsInstall() == false){
    14. 		//未安装，需要手动安装
    15. 		if(confirm("allWebPlugin中间件未安装或未启动,是否立即安装？")){
    16. 			window.open(installPackageUrl, '_blank');
    17. 		}
    18. 	}else{
    19. 		//已安装，检测是否需要版本更新
    20. 		if(hostCnt.IsNewVersion(installPackageVersion) == false)
    21. 		{
    22. 			if(hostCnt.createContainer(canvas,"PluginContainer",license,false,true) == true)
    23. 			{	
    24. 				//hostCnt.UI.ForceShowUI(false);//创建时隐藏插件,需要调用这句，隐藏插件
    25. 				CreatePlugin();
    26. 			}
    27. 		}else{
    28. 			//需要升级
    29. 			alert("检测到升级包,立即升级。");
    30. 			hostCnt.UpdateVersion(installPackageUrl).then(function(data){
    31. 				if(data.code == 0)
    32. 				{	//检测是否安装成功
    33. 					var checkInstall = setInterval(function(){
    34. 						if(hostCnt.GetVersion() == installPackageVersion){
    35. 							window.location.reload();
    36. 							clearTimeout(checkInstall);
    37. 						}
    38. 					}, 1000);
    39. 					
    40. 				}
    41. 				else{
    42. 					window.open(installPackageUrl, '_blank');//直接下载包，手动安装
    43. 				}
    44. 			}).catch(function(strErr){
    45. 				window.open(installPackageUrl, '_blank');//直接下载包，手动安装
    46. 			});
    47. 		}
    48. 	}
    49. }
    50.  
    51. function CreatePlugin(){
    52. 	if(hostCnt == null)
    53. 		return;
    54. 	allWebDesktop = hostCnt.createProxyPlugin("{c8a21e7f-d127-445d-af66-cfd3c8d1b765}");
    55. }

    第四步：插件接口调用

    调用插件对象接口，注意：调用插件读属性与传统调用存在差异，需要在属性后面加上“()”方可获取属性值（仅适合createProxyPlugin方法创建的插件对象）。如下图所示：

    1. function openFile(){
    2. 	var pluginUtilityObj = hostCnt.getPluginUtility();
    3. 		pluginUtilityObj.GetLocalOpenDialog("docx文件(*.docx;*.doc);;excel文件(*.xls;*.xlsx);;所有文件(*.*)").then(function(varFile){
    4. 			console.log(varFile);
    5. 			if(varFile != "")
    6. 				allWebDesktop.Open(varFile,"");//插件Open方法
    7. 		});
    8. }
    9.  
    10. function Close(){
    11. 	allWebDesktop.Close(0);//插件Open方法
    12. }

    完整代码如下：

    1. <HTML>
    2. <HEAD>
    3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
    4. <TITLE>对象 allWebDesktop 的 ATL 测试页TITLE>
    5. HEAD>
    6.  <script type="text/javascript" src="js/jquery.min.js">script>
    7.  <script type="text/javascript" src="js/allWebPlugin.Common.js">script>
    8.  <script type="text/javascript" src="js/allWebPlugin.UI.js">script>   
    9. <script language="javascript" type="text/javascript">
    10.  var allWebDesktop;
    11.  var hostCnt = null;
    12. function init(){   
    13. 	CreateContainer();
    14. }
    15.  
    16. function CreateContainer(){
    17. 	var canvas = document.getElementById('pluginUI');
    18. 	var license = "1q1Sc/tJ1FY2I0gjyovEBlL5O+XF5WrNG0Aq8HHaqVcms51Cl0VS4bYdxltvoHzOdQDEmT8XQhfQhaGxcNiqLQ7oiY85BP8ZsOWCPD3ZYQ5mr14faRu6F8yxXVpgkOeRRlN4clA0lwQi3c0+X/Tvd7BRJKX9uDxkShM9orLUJA119NS++hnfEOcexzvMhL2FWjkNGa2ufV2WjC1M8hbdQSr7uy8b2H7Fiz/HMiWYEFmAnrjDytIx4njwJtO7GYCBKYIE1VGI7iWq9iz4XCIKk1sp1hje01FJCtYPj51+uHfLuWWKatvlFHzSb2IMOSpzAAAA8AEAAQMCTeMq4Dd1nDTk0VXbvFd/Yei0Ojtv60nU4n3yDQuFlxUPwKCQDmQifomaE8DZQR8bEhucH7wk2cabDLm4KCi+wUGvsoKR5r83cLSNLWtaRVtbPoWwMgpFnTmlMtnXrRvPjLx+l/UWPbMMuu9ObsWUU7kdG2mEJRyAFHvRqI+G5Zz8oSets7FNwxdwS2trEiCV4qsAkci3oWhu0ddb02uHzEyOg6sjqKLd9XfKYp4NGdWraSFUYhBsiU7LajQNwmlAeEXWnuNnT5XzoP4icvfojjZZjzw6Ar40ldB7kd9gLDsryZWfwDFsObrXeb9VRVHi8yJ9E17zXMLtpTjtBiIzsQABAYICCgGCMOohm/ugukXrQrv9ulJbVqBTGph9ScEeDPMd5ll5a+dDkRDGlb74ZElzA2gcCi9Xn+FtdXTegKWXRUH5ea5xKhN/6eZgBGL4isdUwaclkKUdq1k60BDQgbvrIx2aRt+io7NnbVJortQQpPWpy/jzQV/aFu+PB/PWwdt/wBHfqgXQw7a1R99EaK6VLtrP7PUURODEIRGk+lP+rFD08z6O/wIXk722B87lfRh+gBoRvhRchXcvlvhqBC3OM7XEBbDLgcvHQvYzm67qxcWvSNJnub+9YxB/7eYR3sE8iJ+h9sfkNE7BYeQ0HwyQpIfCp+3s7nWn8nHBOtbx2Vf5sFBaxHYAAAEOAAAAAUFXUEY=";	
    19. 	var installPackageUrl = "http://127.0.0.1:6651/install/allwebPlugin_x86_v2.0.1.16_20240806.exe";
    20. 	var installPackageVersion = "2.0.0.20";	
    21. 	hostCnt = new PluginHostCnt();
    22. 	if(hostCnt.IsInstall() == false){
    23. 		//未安装，需要手动安装
    24. 		if(confirm("allWebPlugin中间件未安装或未启动,是否立即安装？")){
    25. 			window.open(installPackageUrl, '_blank');
    26. 		}
    27. 	}else{
    28. 		//已安装，检测是否需要版本更新
    29. 		if(hostCnt.IsNewVersion(installPackageVersion) == false)
    30. 		{
    31. 			if(hostCnt.createContainer(canvas,"PluginContainer",license,false,true) == true)
    32. 			{	
    33. 				//hostCnt.UI.ForceShowUI(false);//创建时隐藏插件,需要调用这句，隐藏插件
    34. 				CreatePlugin();
    35. 			}
    36. 		}else{
    37. 			//需要升级
    38. 			alert("检测到升级包,立即升级。");
    39. 			hostCnt.UpdateVersion(installPackageUrl).then(function(data){
    40. 				if(data.code == 0)
    41. 				{	//检测是否安装成功
    42. 					var checkInstall = setInterval(function(){
    43. 						if(hostCnt.GetVersion() == installPackageVersion){
    44. 							window.location.reload();
    45. 							clearTimeout(checkInstall);
    46. 						}
    47. 					}, 1000);
    48. 					
    49. 				}
    50. 				else{
    51. 					window.open(installPackageUrl, '_blank');//直接下载包，手动安装
    52. 				}
    53. 			}).catch(function(strErr){
    54. 				window.open(installPackageUrl, '_blank');//直接下载包，手动安装
    55. 			});
    56. 		}
    57. 	}
    58. }
    59.  
    60. function CreatePlugin(){
    61. 	if(hostCnt == null)
    62. 		return;
    63. 	allWebDesktop = hostCnt.createProxyPlugin("{c8a21e7f-d127-445d-af66-cfd3c8d1b765}");
    64. }
    65.  
    66. function openFile(){
    67. 	var pluginUtilityObj = hostCnt.getPluginUtility();
    68. 		pluginUtilityObj.GetLocalOpenDialog("docx文件(*.docx;*.doc);;excel文件(*.xls;*.xlsx);;所有文件(*.*)").then(function(varFile){
    69. 			console.log(varFile);
    70. 			if(varFile != "")
    71. 				allWebDesktop.Open(varFile,"");
    72. 		});
    73. }
    74.  
    75. function Close(){
    76. 	allWebDesktop.Close(0);
    77. }
    78.  
    79. function openWebFile()
    80. {
    81. 	if(allWebDesktop){
    82. 		var pluginUtilityObj = hostCnt.getPluginUtility();
    83. 		var httpclientObj = hostCnt.getHttpClient();
    84. 		httpclientObj.Clear();
    85. 		if (httpclientObj.Open(0, "https://local.zsignyun.com:6652/doc/test.jt", false)) {
    86. 			httpclientObj.Send().then(function(data){
    87. 				if (httpclientObj.GetStatus() == 200) {
    88. 					var varTempPath = pluginUtilityObj.GetTempPath();
    89. 					var varFile = pluginUtilityObj.GetTempFileName(varTempPath,"zso") + ".jt";
    90. 					httpclientObj.ResponseSaveToFile(varFile);
    91. 					allWebDesktop.Open(varFile,"");
    92. 				}
    93. 				else{
    94. 					var httpStatus = httpclientObj.GetStatus();
    95. 					if(httpclientObj.GetStatus() == 0)
    96. 					{
    97. 						alert("LoadFile test.jt Error:" + httpclientObj.GetErrorText());
    98. 					}else{
    99. 						alert("LoadFile test.jt Status:" + httpStatus + ",请确保安装目录下web\doc目录存在test.jt");
    100. 					}
    101. 				}
    102. 				httpclientObj.Close();
    103. 			});	
    104. 		 }
    105. 	}
    106. }
    107.  
    108. script>
    109. <BODY onload="init()">
    110. <p align="center"><b><span class="style1">allWebDesktop 演示页面span><br class="style1" />p>
    111. <button onclick="openFile()">打开文档button>
    112. <button onclick="Close()">关闭button>
    113. <button onclick="openWebFile()">打开在线jt文档button>
    114.  
    116. <table style="width:100%;height:80%" border="0" align="center"> 
    117.        <tr style="width:100%;height:80%"> 
    118.            <td  style="width:100%;height:80%">
    119. 				<canvas id="pluginUI" style="width:100%;height:100%">
    120. 					<p class="error">Sorry, It looks as though your browser does not support the canvas tag.p>
    121. 				canvas>
    122. 	   td>
    123.        tr>                       
    124.     table>
    125.  
    126. BODY>
    127. HTML>

  • 相关阅读:
    我叫：冒泡排序【JAVA】
    conan使用包以及管理（2）
    Hello Java，Java简介及第一个Java程序
    redis(3)-hiredis-API函数的调用
    留存怎么算？
    Vue3 Vite electron 开发桌面程序
    数据结构题目收录（七）
    Java版直播商城免 费 搭 建：电商、小程序、三级分销及免 费 搭 建，平台规划与营销策略全掌握
    Linux服务：Nginx反向代理与负载均衡
    2022年施工企业数字化转型思考，施工企业数字化转型之路
  • 原文地址：https://blog.csdn.net/yunkaipx/article/details/143314451