vue onbeforeunload（onlyOffice+vue实现基础案例）

onlyOffice+vue实现基础案例

因为最近项目中要集成onlyoffice服务                 ，然后参考官网以及其他一些博主的案例分享  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
，自己记录一下

1.首先要将官方文档中的API安装到服务器里面
















，然后拿到api在服务器的静态地址
  
  
  
  
  
  
  
  
 ，用script标签引入到项目的 index.html 文件中 引入的地址为api在服务器的地址  
  
  
  
  
  
  
  
 ，官方文档的这个地址不可以用
 


 


 


 


 


 


 


 


 
，要自己配
 
 
 
 
 
 
 
 
，配置好这一步才能让后面onlyoffice实例化的时候用起来   
   
   
   
   
   
   
   
  ，如果自己不懂可以问问前辈

2.配置好之后去项目里创建一个新的vue文件
 

 

 

 

 

 

 

 

 
，按照官方文档的格式写好

 

 

 

 

 

 

 

 
，就写一个div然后给绑定一个id就行 3.现在开始写配置内容                  ，是onlyoffice实例化的一个必要参数

在这里是配置是必填项
 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
，也就是官方文档里面的配置写的

fileType

：文件类型
















，必须小写

key

：给服务端用的唯一id                          ，同一个id就会获取服务器缓存里的文件（有这个key 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
，就会先根据它去缓存里找）

























，这项如果最开始只是先试用                 ，可以先给个空字符串

title

：文件名

url：所要渲染的文件的绝对路径  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
，这个参数很重要
















，它传的不是文件的本地地址
  
  
  
  
  
  
  
  
 ，而是需要把文件传到项目所依赖的服务器  
  
  
  
  
  
  
  
 ，然后拿到文件在服务器的url地址（这个一般情况需要后端支持）才可以用
 


 


 


 


 


 


 


 


 
，这个参数决定了能不能实例化出来onlyoffice对象 documentType

：打开的文档类型

editConfig

：相关编辑器配置

editConfig->callbackUrl

：这个参数是文档在保存后的回调url
 
 
 
 
 
 
 
 
，也就是指定文档存储服务的绝对路径   
   
   
   
   
   
   
   
  ，试用情况可以先传个空字符串
 

 

 

 

 

 

 

 

 
，不影响实例化

在edifConfig配置中还有一些常用的配置：

有其他需求可以去看官方文档

4.最后就是实例化对象：

这样就好了

5.callbackUrl回调接口：这里可以让后端随意定义一个接口

 

 

 

 

 

 

 

 
，请求方式为post                  ，onlyoffice在页面关闭后10s或者用户进行编辑完成后会自动调用这个接口
 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
，不需要手动触发
















，在后端接口进行修改后文件的处理                          ，但是接口必须返回 { "error":0 }

这个返回体 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
，不然实例化完onlyoffice会报错
  
  
  
  
  
  
  
  
 。

这里附一下我自己的整个实例化代码以供参考： <template> <div id="office"> <div id="container"></div> </div> </template> <script> import { mapGetters, mapActions } from "vuex"; export default { name: "office", data() { return { container: `officeContent${parseInt(Math.random(0, 1) * 100000)}`, }; }, computed: { ...mapGetters(["cycleInfo", "userInfo"]) }, methods: { /** * @description: 实例化onlyoffice对象

























，渲染到页面 * @params: {Object} * @author: yanyingxin */ initOffice(option) { // debugger console.log(init); try { let fileType = "xlsx"; let documentType = "spreadsheet"; const config = { documentType: documentType, // 打开的文档类型（详细的看官网） document: { // 这个字段包含了对文档本身的设置 fileType: fileType, // 文件类型                 ，必须小写 key: "", // 给服务端用的唯一id  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
，同一个id就会获取服务器缓存里的文件（有这个key
















，就会先根据它去缓存里找）
  
  
  
  
  
  
  
  
 ，文件一旦被保存过或者修改过  
  
  
  
  
  
  
  
 ，就对应一个新的id；url也能做key但是不能有特殊字符并且长度小于128字符长度 title: option.title, // 文件名 url: option.url, // 必须绝对路径
 


 


 


 


 


 


 


 


 
，源文件所在的地方 permissions: { // 权限控制 // fillForms: true, // comment: false, // 评论功能的开关 copy: true, // 允许复制内容 download: true, // 是否允许下载（其实就是另存为
 
 
 
 
 
 
 
 
，因为保存就是保存在服务器） edit: true, // 是否允许编辑文档（这里是历史记录   
   
   
   
   
   
   
   
  ，不允许编辑) print: true, // 是否允许打印 review: true, // 可编辑时才可用
 

 

 

 

 

 

 

 

 
，功能没试过

 

 

 

 

 

 

 

 
，应该是协同编辑下的评审 save: true, }, }, editorConfig: { // 对编辑器（而非文档本身）的设置 callbackUrl: `${process.env.DMS_URL}/xx/xx/config_parser/callback?cycle_id=${option.cycleId}&project_id=${option.projectId}&fileName=${option.title}`,// 指定文档存储服务的绝对路径 lang: "zh-CN", // 编辑器ui的语言 location: "", // 用于设置计量单位 比如us
  
  
  
  
  
  
  
  
 、ca（设成英寸） mode: "edit", // 设定文档打开的时候处于什么状态 默认为edit user: { // 当前正在view/edit此文档的用户信息 name: this.userInfo.name, // full name }, customization: { // autosave: false, forcesave: true, // 启用保存按钮 logo: { image: "", imageEmbedded: "", url: "http://xxx.com.cn", }, customer: { address: "xx市xx区xx路700号", info: "提供高效 
  
  
  
  
  
  
  
  、协调的团队协作方式", mail: "xxx@xxx.com.cn", name: "KR", www: "http://xxx.com.cn", }, }, }, events: { onRequestSaveAs: () => { console.log("save file>>>>>>>>>>>>>>"); }, }, }; console.log(config, config); const docEditor = new DocsAPI.DocEditor("container", config); } catch (error) { console.log("error", error); } }, }, }; </script> <style> iframe { height: 700px !important; border: 2px #ccd0dc solid; } </style>

这个代码不能直接复制粘贴                  ，里面有些参数需要自己配好加进去才可以使用
 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
，但是整体的逻辑以及构造就是这样子的
















，希望对后来人有所帮助