项目需求是， 在vue中进行文档管理， 因此最后选择了wps在线编辑版本。

一、使用方法

1. 在官网下载js-sdk  js文件
   

2. 全局引入

   import * as WPS from './assets/js/jwps.es6'
   // 将其挂载到原型对象上
   Vue.prototype.wps = WPS;
   

3. 使用方法

   1. .将其封装为组件

   	<template>
   	    <div id="viewFile"></div>
   	</template>
   <script>
   export default {
       props:['wpsUrl','token'],
       data(){
           return{
               // 是否开启简易模式
               simpleMode:false,
               }
           },
           mounted(){
               this.openWps(this.wpsUrl,this.token);
           },
           methods:{
               openWps(url, token) {
                   let _this = this;
                   const wps = _this.wps.config({
                       mode: _this.simpleMode?'simple':'normal',
                       mount: document.querySelector('#layoutBox'),
                       wpsUrl: url,
   
                       commonOptions: {
                           isShowTopArea: true, // 隐藏顶部区域(头部和工具栏)
                           isShowHeader: false, // 隐藏头部区域,
                       },
   
                       //  commandBars: [
                       //     // 可以配置多个组件
                       //     {
                       //     cmbId: "Print",
                       //     attributes: [{
                       //         name: "visible",
                       //         value: false
                       //     }]
                       //     },
                       //     {
                       //     cmbId: "HeaderRight",
                       //     attributes: [{
                       //         name: "visible",
                       //         value: false
                       //     }]
                       //     }
                       // ]
   
                   });
                   wps.setToken({"token": token});
               }
   </script>
   
   

   1. 在需要的页面引入

<template>
    <viewFile v-bind:wpsUrl="jwpsUrl" v-bind:token="jtoken"  />
</template>
<script>
    import viewFile from '../../../components/view/view.vue'
    export default {
        data(){
            return{
                jwpsUrl:'',
                jtoken:'',
          }
        },
        created() {
            this.jwpsUrl = sessionStorage.wpsUrl;
            this.jtoken = sessionStorage.token;

        },
        // 通过组件渲染wps的 iframe 框架
        components: {
            viewFile
        },
        beforeDestroy() {
        }
    }
</script>

3.在相关页面调用

		 editFileDetail(
          {
              type: 'edit',
              file_id: row.id
          }
        ).then( res => {
            let r = res.data.data;
            // 跳转 使用sessionStorage，避免关键信息在ip中暴露
            // 使用push会停留当前页面，故不采纳
            // params 传递参数，子组件无法渲染iframe组件，故不采纳
            sessionStorage.wpsUrl = r.path;
            sessionStorage.token = r.token;
            this.$router.push( { name: 'viewFile'})
        })

接口后端提供，前端调用，得到wpsUrl 和 token ， 然后跳转到wps页面。

文章内容可能不全， 有疑问及时留言哈。