vue项目内嵌wps SDK小结

vue项目引入wps插件一点小结

1，下载官方sdk插件，wps目前不支持npm下载，需要通过js包形式引入，wpsSDK本质就是通过iframe访问外部url

main.js中引入

import * as WPS from 'SDK包路径'

原型挂载Vue.prototype.wps = WPS

2，组件封装

props:['wpsUrl','token']，  //两个关键参数  访问url和

mounted(){

    this.openWps(this.wpsUrl,this.token)

}

methods:{

    async openWps(url,token){

        const wps = this.wps.config({

            mode:'simple',   //普通模式打开

            wpsUrl:'url',  //必须参数

            mount:document.querySelector('需要挂载的元素类名')

         })

         //一些常用功能

         wps.ApiEvent.AddApiEventListener('fileOpen',(data) =>{

              console.log(data).  //监听文件打开事件

          })

          await wps.ready()

          await wps.tabs.switchTab({ tabKey:'InsertTab'}). //切换到插入功能

           app.ActiveDocument.TrackVisions = true. //以修订模式打开文档

           await app.CommandBars('TabPrintPreview').Execute(). //打印文档

    }

血泪教训，如果布在本机（非服务器）启动的项目，使用localhost访问wps中台url链接，会报跨域，哪怕在中台配置了跨域ip，解决办法，本机启动后将本地浏览器url中的localhost改成127.0.0.1，原理有懂的小伙伴儿可以评论区留言