一、PageOffice打开文件
- 触发PageOffiice弹窗:在想要打开Office文件的页面上,通过点击按钮或链接来调用POBrowser.openWindow() 方法,此时会弹出一个PageOffice浏览器窗口,这个窗口中会自动加载openWindow()方法的第一个参数指向的页面,在前后端分离的项目里指的是前端页面。
- 请求和展示文件:在上一步弹出的前端页面中添加一个DIV标签用来呈现嵌入的PageOffice控件,首先利用axios向后端发送打开文件的请求,该后端请求会调用poCtrl.webOpen()并返回poCtrl.getHtml()得到的字符串poHtmlCode,然后将这个HTML字符串赋值到前面提到的 DIV 标签,DIV标签就会根据返回的poHtmlCode自动创建PageOffice控件并打开Office文件。
二、PageOffice保存文件
文件提交和保存:当用户点击 PageOffice 控件中的自定义保存按钮时,通过按钮调用pageofficectrl.WebSave() 方法将文件提交到后端保存文件的controller方法中,在这个后端保存文件的controller方法中,利用PageOffice 提供的 FileSaver 类来处理并保存文件,其中这个保存文件的controller方法的url地址是通过前端js代码pageofficectrl.SaveFilePage 属性设置的,一般在OnPageOfficeCtrlInit()事件里设置。