先整几个参考文档:
wps开放平台
开发文档:
https://www.kdocs.cn/l/cmd0fQ9SjcsS
https://www.kdocs.cn/l/cvItn7DFoX99
https://www.kdocs.cn/l/cqVyOOjyWmm8
效果图:copy了个网上的效果图,本地项目的wps做的Linux国产化系统适配,打不开
目前项目是中途需要使用wps相关功能,只能人工给他载进去,下面先说官网介绍的vue使用方式。
如果是vue项目需要使用wps,建议在项目脚手架阶段就通过wps加载项的方式导入项目,这样比较方便开发,少写很多js。
准备开发环境:wps、Node.js
具体步骤:
//通过npm全局安装wpsjs开发工具包
npm install -g wpsjs
//更新wpsjs的命令
npm update -g wpsjs
//新建一个wps加载项
wpsjs create project
//调试命令
wpsjs debug
选择UI框架的时候,选择Vue就好,"Vue"代表生成的示例代码集成了Vue相关的脚手架,实际开发的时候更适合工程化开发,
我本地单独载入的方式
<script type="text/javascript" src="wps_general.js"></script>
这里js源码文件不知道怎么load进来,copy了一份在下面(中文编码有问题,但是不影响使用)
/**
* @file common.js
* @desc WPSһЩͨ�õķ���������ƽ̨ͨ��
* @author wps-developer
*/
/**
* @desc WPS���ú�����Ĺ��캯��
*/
function WPSFrame() {
this.elementObj = null;
// ���������һЩ��װ�ķ������Լ����ӹ��ı��ӿ�
this.pluginObj = null;
// WPS��Application������WPS�ڲ�API��ڵ㣬��MicroSoft Office APIͨ��
this.Application = null;
// �������Ϣ
this.browserInfo = getBrowserInfo();
}
WPSFrame.prototype = {
constructor: WPSFrame,
/**
* @desc ��ȡ���Ԫ�ض���
* @param { String } tagID ���������divԪ��id
* @returns objectԪ�ض���WPS�������
*/
getElementObj: function (tagID) {
var iframe;
var codes = [];
iframe = document.getElementById(tagID);
if (isWindowsPlatform()) {
codes.push('<object height="100%" width="100%" ');
codes.push('classid=clsid:8E7DA7EC-07EC-4343-8141-88A2ADB63A5F></object> ');
iframe.innerHTML = codes.join("");
this.elementObj = iframe.children[0];
} else {
if (iframe.innerHTML.indexOf("application/x-wps") > -1) {
iframe.innerHTML = "";
}
codes.push("<object type='application/x-wps' width='100%' height='100%'></object>");
iframe.innerHTML = codes.join("");
this.elementObj = iframe.children[0];
window.onbeforeunload = function () {
this.elementObj.Application.Quit();
};
}
return this.elementObj;
},
/**
* @param { String } id ���������divԪ��id
* @param { Function } callback ��ʼ�����֮��Ļص�����
* @desc ��ʼ��WPS������ʼ����������WPS��Application����
*/
initPlugin: function (id, callback) {
this.pluginObj = this.getElementObj(id);
if (!isWindowsPlatform()) {
if (undefined != this.browserInfo.chrome) {
this.pluginObj = this.elementObj.Application;
if (null == this.pluginObj) {
this.elementObj.setAttribute('data', '../../../file/Normal.dotm');
var Interval_control = setInterval(
function () {
this.pluginObj = this.elementObj.Application;
if (this.pluginObj && this.pluginObj.IsLoad()) {
clearInterval(Interval_control);
this.Application = this.pluginObj;
if (undefined != callback