VUE+Springboot

本文描述了在（VUE+Springboot）前后端分离的项目中，编写PageOffice关键代码的位置。本站所有的示例说明中都提供了一些关键代码， 这些关键代码需要需要放到哪里，请参考本文。

后端Springboot项目

调用PageOffice打开文件的Controller代码，例如DocumentController（您可以自己命名）代码如下：

@RestController
@RequestMapping(value = "/doc")
public class DocumentController {  
  /** 您在本网站所看到的所有例子的关键代码，其中创建PageOfficeCtrl对象的关键代码，放到如下代码位置处，
   替换掉关键代码开始到结束之间的代码即可。
   下面的action方法命名为openFile。只是为了方便表述，您可以根据自己需求定义，但是需要和vue前端
   的axios.post("/api/doc/openFile").then((response) 地址保持一致。
  */
  @RequestMapping(value="/openFile")
  public String openFile(HttpServletRequest request,int file_id,String file_name) {
      //---- 关键代码开始 ----
      PageOfficeCtrl poCtrl = new PageOfficeCtrl(request);
      // ......
      //webOpen的第一个参数支持能够输出下载文件的Url相对地址或者文件在服务器上的磁盘路径两种方式
      //查看详细，请在本站搜索“PageOffice属性或方法中涉及到的URL路径或磁盘路径的说明”
      poCtrl.webOpen(......);
      //---- 关键代码结束 ----

      return  poCtrl.getHtmlCode();//必须。
  }
  
  /** 如果您不需要保存提交PageOffice打开的office文件，也就是说你没有调用 poCtrl.setSaveFilePage(...);
   就无需编写下面的action方法
   您在本网站所看到的所有例子的关键代码，其中创建FileSaver对象的关键代码，放到如下代码位置处，
   替换掉关键代码开始到结束之间的代码即可。
  */
  @RequestMapping("/saveFile")
  public void saveFile(HttpServletRequest request, HttpServletResponse response,int file_id,String file_name) {
      //---- 关键代码开始 ----
      FileSaver fs = new FileSaver(request, response);
      // ......
      fs.close();
      //---- 关键代码结束 ---- 
  }
    
  /** 如果您不需要保存提交Word或Excel里用户输入的内容，也就是说你没有调用 poCtrl.setSaveDataPage(...);
   就无需编写下面的action方法
   您在本网站所看到的所有例子的关键代码，其中创建WordDocument或者Workbook对象的关键代码，放到如下代码位置处，
   替换掉关键代码开始到结束之间的代码即可。
  */
  @RequestMapping("/saveData")
  public void saveData(HttpServletRequest request, HttpServletResponse response) {
      //---- 关键代码开始 ----
      WordDocument doc = new WordDocument(request, response);
      // ......
      doc.close();
      //---- 关键代码结束 ----
  }
    
}

前端Vue项目

调用PageOffice打开文件的Vue页面，例如：src/views/DocView.vue

注意

下面代码中的关闭按钮，只是演示一下添加自定义按钮的所需要编写的代码，您可以根据实际需要，添加其他的自定义按钮， 比如另存、打印、关闭等，或您的项目实际需要的其他按钮。

添加自定义按钮需要3步

• 在OnPageOfficeCtrlInit事件里调用pageofficectrl.AddCustomToolButton("关闭", "Close()", 21);
• 在methods里编写Close()函数代码
• 在mounted里把Close函数挂接到window对象：window.Close = this.Close;

 <template>
   <div class="doc">
     演示: 文档<br /><br />
     <!-- 此div用来加载PageOffice客户端控件，其中div的高宽及位置就决定了控件的大小及位置 -->
     <div style="width:auto; height:900px;" v-html="poHtmlCode"></div>
   </div>
 </template>

 <script>
 import request from '@/utils/request'
 export default {
   name: 'DocView',
   data() {
     return {
       poHtmlCode: '',
       open_params: '',
     }
   },
   created: function () {
     //使用pageofficectrl.WindowParams获取获取父页面(此项目中为：HomeView.vue)中POBrowser.openWindow()方法的第三个参数的值,获取到的值为string类型
     this.open_params = JSON.parse(pageofficectrl.WindowParams);
     // 请求后端打开文件
     this.openFile().then(response => {
       this.poHtmlCode = response;
     }
     );

   },
   methods: {
     OnPageOfficeCtrlInit() {
       //PageOffice的初始化事件回调函数，您可以在这里添加自定义按钮，执行您自定义的js。比如添加保存、打印、另存、关闭等按钮
       pageofficectrl.AddCustomToolButton("保存", "Save", 1);//其中"Save"对应methods中的Save()函数，并且需要在mounted中挂载。
       // pageofficectrl.AddCustomToolButton("另存为", "SaveAs()", 11);
       // pageofficectrl.AddCustomToolButton("打印", "PrintFile()", 6);
       // pageofficectrl.AddCustomToolButton("全屏", "IsFullScreen()", 4);
       // pageofficectrl.AddCustomToolButton("关闭", "Close()", 21);
     },
     // 控件中的一些常用方法都在这里调用，比如保存，打印等等
     Save() {
       //使用SaveFilePage属性设置后端保存方法的Controller路由地址，这个地址必须从"/"开始，并且也可以向此路由地址传递json字符串参数，示例如下：
       let saveFileUrl = "/doc/saveFile";
       let paramValue = new URLSearchParams(this.open_params);//为了简单起见，这里直接使用打开时的参数。
       pageofficectrl.SaveFilePage = `${saveFileUrl}?${paramValue.toString()}`;
       //在这里写您保存前的代码
       pageofficectrl.WebSave();
       //在这里写您保存后的代码，比如判断保存结果pageofficectrl.CustomSaveResult
     },
     // SaveAs() {
     //    pageofficectrl.ShowDialog(2);
     //  },
     // IsFullScreen() {
     //   pageofficectrl.FullScreen = !pageofficectrl.FullScreen;
     // },
     // PrintFile() {
     //   pageofficectrl.ShowDialog(4);
     // },
     // Close() {
     //   pageofficectrl.CloseWindow();
     // },
     AfterDocumentOpened() {
       //在这里写您文档打开后自动触发的代码
     },
     openFile() {
       //发起GET请求到后端Controller的/doc/openFile路由
       return request({
         url: '/doc/openFile',
         method: 'get',
         params: this.open_params
       })
     }
   },
   mounted: function () {
     //将当前页面methods中定义的函数挂载到PageOffice控件，例如控件触发的事件、自定义按钮触发的函数。
     window.POPageMounted = this;//此行必须
   }
 }
 </script>

在您自己项目的前端页面里，例如是一个文档列表，有一列链接名为“打开文件”，或者有一个“打开文件”按钮，这个页面我们称之为父页面。在链接或按钮里就调用POBrowser的openWindow方法，弹出新浏览器窗口访问DocView.vue（看我们称之为子页面）在线打开文件，代码如下：

 <a  href="#" @click.prevent="open_pageoffice()">打开文件</a>

 <script>
 import request from '@/utils/request'
 import { POBrowser } from '@/utils/js-pageoffice'
 export default {
   name: 'HomeView',
   methods: {
     open_pageoffice() {
       let paramJson={};
       paramJson.file_id=1;
       paramJson.file_name="test.doc";
       let paramString=JSON.stringify(paramJson);

       //openWindow()第三个参数用来向弹出的PageOffice浏览器（POBrowser）窗口传递参数(参数长度不限)，支持json格式字符串。
       //此处为了方便演示，我们传递了file_id和file_name两个参数，具体以您实际开发为准。
       POBrowser.openWindow('/showDoc', 'width=1150px;height=900px;',paramString);
     },
   }
 }
 </script>