| 浏览器应用集成嵌入WPS指南 | 您所在的位置：网站首页 › java调用wps失败 › 浏览器应用集成嵌入WPS指南 |
浏览器应用集成嵌入WPS指南
|
因为该WPS插件使用NPAPI机制来和浏览器交互，故要求使用插件的浏览器必须支持NPAPI机制且必须开启NPAPI机制。 以下是支持的常见的浏览器及其版本： FireFox浏览器52及小于52的版本（高于52的版本不再支持NPAPI） Chrome浏览器45及小于45的版本（高于45的版本不再支持NPAPI） 360浏览器 （支持NPAPI的版本） UOS浏览器 （支持NPAPI的版本） 项目因使用WPS金山文档在线编辑或者腾讯文档时候，对于专业的需要使用Excel用户来说，在线的Office文档打开的解决方案是不满足需求的，所以转向了定制版本的WPS集成嵌入BS应用，当然资金足够可以考虑石墨文档、葡萄城等优秀专业的企业合作。 应用最终表现还是优秀的，相当于直接将WPS直接嵌入网页，满足各类需要。唯一缺憾的是，这个解决方案不是免费的，因为合作我们获得用于开发的WPS安装包(版本号为11.8.2.8744)。浏览器推荐使用360极速版（极速模式），下面附着1张效果图
提供下截止2020年1月官方开发团队提供的api文档 （nphelper） 链接: https://pan.baidu.com/s/1NnPXnOdsdnAh5v3SgNAYaQ 提取码: 25gt 【如有侵权，请私信联系作者删除】 下面开始进行编码共享步骤： 1、首先创建demo.html DOCTYPE XHTML> NP插件Demo $(function() { var opts = { lines: 9, // The number of lines to draw length: 0, // The length of each line width: 10, // The line thickness radius: 15, // The radius of the inner circle corners: 1, // Corner roundness (0..1) rotate: 0, // The rotation offset color: '#000', // #rgb or #rrggbb speed: 1, // Rounds per second trail: 60, // Afterglow percentage shadow: false, // Whether to render a shadow hwaccel: false, // Whether to use hardware acceleration className: 'spinner', // The CSS class to assign to the spinner zIndex: 2e9, // The z-index (defaults to 2000000000) top: 'auto', // Top position relative to parent in px left: 'auto' // Left position relative to parent in px }; var target = document.getElementById('foo'); var spinner = new Spinner(opts).spin(target); }) //初始化 var wpsFrame = new WPSFrame; /** * 基础参数 */ var app = "test"; var userid = "A004"; var sheetname; var filename = "1.xlsx"; //"测试文档.xlsx"; var filetype = getfiletype(filename); //"xls"; const basepath = baseurl + "/wps/template/"; //用户文档路径 var userfileurl = baseurl + "/" + app + "/" + userid + "/" + encodeURI(filename); //模板文档路径 var templateurl = basepath + encodeURI(filename); //wps安装包地址 var downloadurl = "http://abc.com/upload/soft/setup_CN_2052_11.8.2.8744_Professional_VBA_huayu.exe"; //必须无中文 const remoteGetUrl = basepath + encodeURI(filename); remoteSaveUrl = baseurl + "/WpsCloudService/upload?app=" + app + "&userid=" + userid; /** * 获取文件类型 */ function getfiletype(filename) { if (filename.indexOf("xls") != -1) { filetype = "xls"; } else if (filename.indexOf("ppt") != -1) { filetype = "ppt"; } else if (filename.indexOf("doc") != -1) { filetype = "doc"; } return filetype; } /** * 程序执行 */ $(document).ready(function() { //检测浏览器是否为360 if (!is360browser()) { alert("您当前的浏览器不支持此插件，请更换为360浏览器，推荐360极速浏览器(极速模式)，效果更好,注：请下载专业版WPS"); return; } //初始化控件 init(filetype) //打开文档 open(filetype, sheetname); }) function openfile(filename, type) { userfileurl = baseurl + "/" + app + "/" + userid + "/" + encodeURI(filename); templateurl = basepath + encodeURI(filename); filetype = type; initchange(type) if ($("#sheet").val() == "") { sheetname = ""; } else { sheetname = $("#sheet").val(); } open(type, sheetname); } function savefile() { save(filetype); } 指定Sheet页: 下载最新版本专业wps 注：使用本功能前提需下载专业定制版WPS，360浏览器一定是要极速模式，兼容模式不支持 菜单 Excel Word PPT 保存2、分解 $(document).ready 中的初始化 和 打开方法以及 保存方法 因解决方案，一定需要浏览器支持NPAPI，故目前只有360浏览器可使用，或者上述阐述的其他浏览器 ①初始化插件 /** * 默认无高宽，均原始100% * 初始化插件，定义属性 * @param {*文件类型doc,xls,ppt} doctype */ function init(doctype) { plugin.setAttribute("type", "application/x-wps-np-plugin"); plugin.setAttribute("height", "100%"); plugin.setAttribute("width", "100%"); plugin.setAttribute("id", "DocFrame1"); //文档类型定义 if (doctype == "doc") { plugin.setAttribute("app", "wps"); } else if (doctype == "xls") { plugin.setAttribute("app", "et"); } else if (doctype == "ppt") { plugin.setAttribute("app", "wpp"); } var obj = document.getElementById('wps'); obj.appendChild(plugin); return plugin; }②打开远程资源 此处流程为先下载远程资源，再通过打开下载后的本地临时文档，再去上传，从而达到类似直接修改云文档的效果。 因官方目前版本也在迭代，优化测试某些接口，目前Word的接口较为完善，demo的打开保存都已实现，调用的是vba提供的方法。因为我们的业务较为简单，本次只叙述打开、与保存。 其余的功能，交给有兴趣的读者去自行研究，语法与VBA保持一致。 function open(filetype, param) { //loading动画加载 $("#foo").show(); //下载网络资源，返回本地路径 var res = false; //下载用户文件到本地，返回临时文件url url = plugin.application.downloadFile(userfileurl); if (url.indexOf('Error') != -1) { //下载文件用户文件失败，下载模板文件 url = plugin.application.downloadFile(templateurl); } //打开本地临时文件 res = plugin.application.openDocument(url, false); if (res) { //加载动画效果关闭 $("#foo").hide(); console.log("执行打开方法成功" + new Date()); } if (filetype == "xls") { //定义对象，用于后面保存方法 workbook = plugin.application.ActiveWorkbook; if (param != "" && param != undefined) { //本次版本号的打开指定sheet页的调用方式 plugin.application.get_Worksheets(param).select(); } } else if (filetype == "ppt") { workbook = plugin.application.ActivePresentation; } }③ 保存 function save(filetype) { var tempurl = url; var arr = tempurl.split("."); tempurl = arr[0] + "kls." + arr[1]; //保存到本地 if (filetype == "doc") { //另存为保存到本地 plugin.application.SaveAs(tempurl); } else if (filetype == "xls") { //此版本号支持编辑状态下保存Excel plugin.application.ExitEdit(); tempurl = url; //保存到本地 workbook.Save(); } else if (filetype == "ppt") { //打开时候定义的对象，另存为文件保存到本地 workbook.SaveAs(tempurl); } //上传文件到服务器，remoteSaveUrl服务器保存接口,tempurl本地临时文件 var exc = plugin.UploadFile(remoteSaveUrl, tempurl) alert(exc); }截止上述，基础的打开保存功能均已实现。还有更多的操作，请参阅 https://open.wps.cn/docs/office 官方文档，浏览器应用集成嵌入WPS指南。 ④服务器保存文件，下面示例代码为C#版本 其他版本的可以参照合作后官方提供的demo进行抓包获取，进行分析 或者参照标准http协议（JAVA版本） https://blog.csdn.net/SJh3322/article/details/78435097 public string upload(string app,string userid) { string path = string.Empty; path = "~/" + app + "/" + userid + "/"; //获取文件 HttpPostedFileBase file = Request.Files["file"]; if (file != null) { //是否存在这个app应用 if (System.IO.Directory.Exists(Server.MapPath(path)) == false) { System.IO.Directory.CreateDirectory(Server.MapPath(path)); } string fileName = file.FileName; string extension = Path.GetExtension(fileName); fileName = fileName.Substring(0, fileName.Length - extension.Length); path = path + fileName.Replace("kls",string.Empty)+ extension; if (System.IO.File.Exists(Path.GetFullPath(path))) { System.IO.File.Delete(Path.GetFullPath(path)); } file.SaveAs(System.Web.HttpContext.Current.Server.MapPath(path)); } return "success"; }
至此，浏览器应用集成嵌入WPS，打开服务器文档及保存功能实现，目前仅支持Excel、Word、PPT。 希望能够给有需要的小伙伴一个参考，也欢迎大家能够提些建议。 本文为原创文章，转载请标明出处。 |
【本文地址】
公司简介
联系我们