近期公司项目有一个web端对文档编辑的需求偶然看到WPS开放平台做了一个简单的编辑demo
PHP端
public function detail($ids = null){// $id = 1;$data = ['_w_appid' => '你的APPID',];$sing = $this->getSign($data);//生成签名//type 值需要根据文档中文件的格式去定义 我只处理doc、docx所以固定了$url = '/office/w/' . 文档id . '?_w_appid=' .'你的APPID'. '&_w_signature=' . $sing;$this->assign('url', $url);return $this->fetch();}/*** 生成wps要的签名*/function getSign($data){ksort($data); //按照key升序排列$stringA = '';foreach ($data as $key => $item) {$stringA .= $key . '=' . $item; // 整合新的参数数组}$stringSignTemp = $stringA . "_w_secretkey=" . '你的Key';//拼接$appKey$stringSignTemp = hash_hmac('sha1', $stringSignTemp, '你的Key', true);$sign = base64_encode($stringSignTemp);return urlencode($sign);}//下面中info()和save()接口需要重定向分别是:/v1/3rd/file/info、/v1/3rd/file/save/*** 获取文件信息*/public function info(){$header = request()->header();$id = $header['x-weboffice-file-id'];//文件id在你传给wps时它会返给你$templates = db('你的表')->where(['id' => $id])->find();//下面的格式 wps固定 具体的要看wps文档$data = ['file' => ['id' => $id, //文件id,字符串长度小于40'name' => $templates['name'], //文件名'version' => $templates['edition'], //当前版本号,位数小于11'size' => $templates['size'], //文件大小,单位为B'creator' => 'id0', //创建者id,字符串长度小于40'create_time' => time($templates['creattime']), //创建时间,时间戳,单位为秒'modifier' => "id1000", //修改者id,字符串长度小于40'modify_time' => time(), //修改时间,时间戳,单位为秒'download_url' => $templates['url'], //文档下载地址'preview_pages' => 100,'user_acl' => ['rename' => 0, //重命名权限,1为打开该权限,0为关闭该权限,默认为0'history' => 0, //历史版本权限,1为打开该权限,0为关闭该权限,默认为1'copy'=> 1, // 复制'export'=> 1, // 导出PDF'print' => 1, // 打印],'watermark' => ['type' => 0, //水印类型, 0为无水印; 1为文字水印'value' => "", //文字水印的文字,当type为1时此字段必选'fillstyle' => "rgba( 192, 192, 192, 0.6 )", //水印的透明度,非必选,有默认值'font' => "bold 20px Serif", //水印的字体,非必选,有默认值'rotate' => -0.7853982, //水印的旋转度,非必选,有默认值'horizontal' => 50, //水印水平间距,非必选,有默认值'vertical' => 100 //水印垂直间距,非必选,有默认值]],'user' => ['id' => $templates['admin_id'], //用户id,长度小于40'name' => 'wps-'.$templates['admin_id'], //用户名称'permission' => "write", //用户操作权限,write:可编辑,read:预览'avatar_url' => "" //用户头像地址]];return json_encode($data);}/*** 保存文件*/public function save(){$menus=new Obs;$header = request()->header();$id = $header['x-weboffice-file-id'];//$header['x-weboffice-file-id']$templates = db('你的表')->where(['id' => $id])->find();$url = $menus->uploads($_FILES);//文件上传接口$arr = array('name' => $_FILES['file']['name'],'size' => $_FILES['file']['size'],'url' => $url,'edition' => $templates['edition']+1);db('你的表')->where(['id' => $id])->update($arr);$data = ['file' => ['id' => $id, //文件id,字符串长度小于40'name' => $_FILES['file']['name'], //文件名'version' => $templates['edition']+1, //当前版本号,位数小于11'size' => round($_FILES['file']['size']/8), //文件大小,单位是B'download_url' => $url //文件下载地址]];return json_encode($data);}
前端
<script>window.onload = function() {const jssdk = WebOfficeSDK.config({url: "<?php echo $url ?>", // 该地址需要后端提供,/office/p/xxx});// 如果需要对 iframe 进行特殊的处理,可以通过以下方式拿到 iframe 的 dom 对象console.log(jssdk.iframe);// 打开文档结果jssdk.on('fileOpen', (data) => {console.log(data);});};</script>
效果图