浏览器应用集成嵌入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>
<html> <head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- 悬浮按钮 meta -->
<meta name="Author" content="Rin">
<!-- 悬浮按钮css -->
<link rel="stylesheet" href="../css/asidenav.css">
<!-- jquery 在线cdn -->
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- oa np 插件js -->
<script src="../js/wps_general.js"></script>
<script src="../js/common.js"></script>
<!-- loading 插件js -->
<script src="../js/spin.min.js"></script>
<title>NP插件Demo</title>
<!-- loading加载动画效果 Start-->
<script type="text/javascript">
$(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);
})
</script>
<!-- loading End-->
<script>
//初始化
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);
}
</script>
</head> <body>
<!-- 加载动画效果 -->
<div id="foo" style="width:100px; height:200px; position:absolute;left: 50%;margin-top: 360px;" hidden="hidden">
</div> <div id="wps" align="right" style="width:100%; height:75%; margin:0 auto;">
</div>
<div style="text-align: left;margin-top: 50px;margin-left: 100px;">
<label>指定Sheet页: </label><input type="text" id="sheet" /><br/><br/>
<a href="http://abc.com/upload/soft/setup_CN_2052_11.8.2.8744_XXXX_VBA_ABC.exe"><b>下载最新版本专业wps</b></a>
<br/> 注：使用本功能前提需下载专业定制版WPS，360浏览器一定是要极速模式，兼容模式不支持
</div> <!-- 悬浮按钮 Start-->
<div id="nav">
<svg width="0" height="0">
<defs>
<filter id="goo">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"></feGaussianBlur>
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="goo"></feColorMatrix>
<feComposite in="SourceGraphic" in2="goo" operator="atop"></feComposite>
</filter>
</defs>
</svg>
<div class="aside-nav bounceInUp animated" id="aside-nav">
<label for="" class="aside-menu" title="按住拖动">菜单</label> <a href="javascript:void(0)" onclick="openfile('1.xlsx','xls')" title="Excel" class="menu-item menu-first">Excel</a>
<a href="javascript:void(0)" onclick="openfile('1.docx','doc')" title="Word" class="menu-item menu-second">Word</a>
<a href="javascript:void(0)" onclick="openfile('1.pptx','ppt')" title="PPT" class="menu-item menu-third">PPT</a>
<a href="javascript:void(0)" onclick="savefile()" title="保存" class="menu-item menu-fourth">保存</a>
</div>
</div>
</body>
</html>
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(, 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。
希望能够给有需要的小伙伴一个参考，也欢迎大家能够提些建议。
浏览器应用集成嵌入WPS指南的更多相关文章
- Python神经网络集成技术Guide指南
Python神经网络集成技术Guide指南 本指南将介绍如何加载一个神经网络集成系统并从Python运行推断. 提示 所有框架的神经网络集成系统运行时接口都是相同的,因此本指南适用于所有受支持框架(包 ...
- 快速集成图片浏览器快速集成图片浏览器->MJPhotoBrowser的使用
介绍: 一个比较完整的图片浏览器,高仿了新浪微博的图片浏览效果,功能包括:下载浏览互联网图片,点击缩略图全屏显示图片.当加载较大图片时会出现圆形进度条,滑动浏览所有图片.保存图片到本地相册.GIF图片 ...
- CI Weekly #21 | iOS 持续集成快速入门指南
搭建 iOS 持续集成环境要多久?每个 iOSer 都有不同的答案.这次我们整理了 flow.ci 的 iOS 持续集成的相关文档和最佳实践,希望帮你更快地完成构建.更新文档见: flow.ci iO ...
- 火狐浏览器插件(XPI 文件)签名指南
Symantec,Thawte,GlobalSign 签发的代码签名证书都可以签名火狐浏览器插件(XPI)文件.如果您还没有代码签名证书,请联系易维信(EVTrust)购买火狐代码签名证书. 第 1 ...
- LINQ——语言级集成查询入门指南(1)
本文主要是对语言级集成查询或简称为LINQ做一个介绍,包括LINQ是什么,不是什么,并对它在语言特性方面做一个简短的回顾,然后举一些使用LINQ的实际例子进行说明. 语言级集成查询是什么? 在我过去写 ...
- spring boot 集成apollo 快速指南
目前市面上流行的三大配置中心框架:Spring CLoud Config .Alibaba Nacos 以及携程apollo, 我们相应架构组号召,就使用Apollo吧. Work Flow 简单解释 ...
- 重磅！Vertica集成Apache Hudi指南
1. 摘要 本文演示了使用外部表集成 Vertica 和 Apache Hudi. 在演示中我们使用 Spark 上的 Apache Hudi 将数据摄取到 S3 中,并使用 Vertica 外部表访 ...
- Salesforce 开发 | Salesforce与微信集成实操指南
配置前须知 Salesforce通过试点对特定客户提供Lightning WeChat Messaging,该试点需要同意特定的条款.除非Salesforce宣布WeChat Messaging全面可 ...
- HTML5浏览器嵌入窗口程序解决方案
浏览器嵌入窗口程序一直以来就是WEB应用程序的首选方案,这种方案只需要实现一个主窗口,并提供一些接口供脚本调用,内部的界面和逻辑处理全部用html,css,javascript去实现.我最早看到的相关 ...
随机推荐
- 下推栈实现（c++编程思想 p136）
1 头文件Stack.h #ifndef STACK_H #define STACK_H struct Stack { struct Link { void* data; Link* next; vo ...
- 用一维数组实现栈（C++编程思想 p120）
1 实现思路 向栈中插入4个元素后的状态 执行过程分析: 2 代码实现 clib.h 接口定义 typedef struct CStashTag { int ele_size; //栈中每个元素的占用 ...
- Python--day45--pymysql模块初识以及SQL注入
pymysql模块学习路径:增删改的时候一定要conn.commit() pymysql模块实现登录功能: import pymysql user = input("username:&qu ...
- Python3 dir() 函数
Python dir() 函数 描述 dir() 函数不带参数时,返回当前范围内的变量.方法和定义的类型列表:带参数时,返回参数的属性.方法列表.如果参数包含方法__dir__(),该方法将被调用.如 ...
- 同一个页面 andriod和ios设备上的按钮颜色不一致
andriod系统显示蓝色的按钮,正常:ios设备显示灰色的按钮,不正常. style属性添加-webkit-appearance: none;
- 【p083】传球游戏
Time Limit: 1 second Memory Limit: 50 MB [问题描述] 上体育课的时候,小蛮的老师经常带着同学们一起做游戏.这次,老师带着同学们一起做传球游戏. 游戏规则是这样 ...
- WPF 解决弹出模态窗口关闭后，主窗口不在最前
本文告诉大家如何解决这个问题,在 WPF 的软件,弹出一个模态窗口.使用另一个窗口在模态窗口前面.从任务栏打开模态窗口.关闭模态窗口.这时发现,主窗口会在刚才使用的另一个窗口下面 这是 Windows ...
- H3C 主动方式建立连接过程
- LeekCode解题记录
昨天晚上有个LeekCode的比赛,两个半小时解五题,轻松解决前两题后,卡在第三题,还剩半小时时放弃,开始解第五题,解完但未验证通过,第四题只看了下题目. 排名第一的大佬只用了36分钟全部写完. 差距 ...
- 洛谷4139 bzoj 3884 上帝与集合的正确用法
传送门 •题意 求$2^{2^{2^{2^{2^{2^{...^{2}}}}}}}$ (无穷个2) 对p取模的值 •思路 设答案为f(p) $2^{2^{2^{2^{2^{2^{...^{2}}}}} ...