WPS文件选择器

WPS文件选择器是WPS公司向用户提供的一套封装好的获取用户云文档列表的H5页面。通过嵌入这个页面，你可以快速获取到用户目录下的所有设备和文件列表，当选定一个或多个文件后，可获取到该文件信息进行后续的在线编辑等自定义操作。

WPS文件选择器参数

• 页面链接：https://docs.wps.cn/open?appid=$appid&rpc_token=$rpc_token
• 监听事件：message
• 监听举例：window.addEventListener("message", callbackFunction, false);
• 选择按钮回调方法："fileids"，内容包括选中的fileid列表
• 取消按钮回调方法："cancel"

文件列表获取步骤

• 在前端通过第三方服务器申请rpc_token，相关接口请参考用户授权模块中的根据access_token和scope获取RPCToken模块
• 在页面嵌入打开docs文件选择器页面 页面链接：https://docs.wps.cn/open?appid=$appid&rpc_token=$rpc_token
• 添加监听事件：window.addEventListener("message", callbackFunction, false);
• 选择或取消事件触发后，执行callbackFunction自定义函数

Js举例

加载文件列表

function getFileList(appId, rpcToken)
{
  document.getElementById("fileSelector").src = "https://docs.wps.cn/open?appid=" + appid + "&rpc_token=" + rpcToken;
}

添加监听事件

window.addEventListener("message",receiveMessage, false);

3 事件触发回调函数

function receiveMessage(event)
{
    if (event.data == "")
        return;
    var body = document.getElementsByTagName('body')[0];
    var result = JSON.parse(event.data);
    if (result.method == "fileids")
    {
        for (fileid in result.fileids)
        {
            $.get("https://openapi.wps.cn/oauthapi/v2/rpc/links/url?appid=" + appid + "&rpc_token=" + rpc_token + "&fileid=" + result.fileids[fileid], function(result){
                var div = document.createElement('div');
                var a = document.createElement('a');
                a.href = result.linkurl;
                a.innerText = result.fname;
                div.appendChild(a);
                body.appendChild(div);
            });
        }
    } else if (result.method == "cancel") {
        closePage();
    }
}