转载:PageOffice调用本地office实现多人在线同时编辑Word文档

发布时间 2023-05-25 14:21:55作者: 爱吃苹果皮

说明:多人同时在线编辑文件大多数会出现文档相互覆盖的问题,后保存的文档会覆盖先保存的文档。pageoffice的这个功能可以用程序控制不同用户打开文件后,编辑Word文档中属于自己的区域,并且不会互相影响。

1、环境:

前端:vue

后端:springboot、pageoffice5.4.0.3版本

vue+springboot集成pageoffice的具体步骤参考:Vue+springboot集成PageOffice实现在线编辑Word、excel文档_response_L的博客-CSDN博客_vue word在线编辑

2、前端

在index.vue页面定义不同用户打开文件的按钮,调用pageoffice的POBrowser打开文件

  1. <template>
  2. <div class="Word">
  3. <div style="text-align: center;">
  4. <br/><br/>
  5. <h1 style="color: rgb(114, 43, 207);">不同的用户在文档中可以编辑的区域不同</h1>
  6. <input type="button" @click="openWord('zhangsan')" value="张三打开文件"/><br/><br/>
  7. <input type="button" @click="openWord('lisi')" value="李四打开文件"/><br/>
  8. </div>
  9. </div>
  10. </template>
  11. <script>
  12. const axios=require('axios');
  13. export default{
  14. name: 'Word',
  15. data(){
  16. return {
  17. }
  18. },
  19. methods:{
  20. openWord(userId){
  21. POBrowser.openWindowModeless('word?userId='+userId , 'width=1200px;height=800px;');
  22. }
  23. }
  24. }
  25. </script>

 Word.vue页面通过axios请求后台获取pageoffice控件在页面解析

  1. <template>
  2. <div class="Word">
  3. <div class="flow4">
  4. <input type="button" @click="exit()" value="退出" />
  5. <strong>当前用户:</strong>
  6. <span style="color: Red;">{{user}}</span>
  7. </div>
  8. <div style="height: 800px; width: auto" v-html="poHtmlCode"/>
  9. </div>
  10. </template>
  11. <script>
  12. const axios=require('axios');
  13. export default{
  14. name: 'Word',
  15. data(){
  16. return {
  17. poHtmlCode:'',
  18. user:'',
  19. }
  20. },
  21. created: function(){
  22. this.user = this.$route.query.userId;
  23. axios.post("/api/SetDrByUserWord2/Word?user="+this.user).then((response) => {
  24. this.poHtmlCode = response.data;
  25. }).catch(function (err) {
  26. console.log(err)
  27. })
  28. },
  29. methods:{
  30. exit(){
  31. window.external.close();
  32. },
  33. Save() {
  34. document.getElementById("PageOfficeCtrl1").WebSave();
  35. },
  36. //全屏/还原
  37. IsFullScreen() {
  38. document.getElementById("PageOfficeCtrl1").FullScreen = !document.getElementById("PageOfficeCtrl1").FullScreen;
  39. }
  40. },
  41. mounted: function(){
  42. // 将vue中的方法赋值给window
  43. window.Save = this.Save;
  44. window.IsFullScreen = this.IsFullScreen;
  45. }
  46. }
  47. </script>

3、后端

后端打开test.doc文件,这个文件相当于一个模板,张三和李四两个用户分别编辑的区域是两个单独的文件,在打开文件的时候将content这两个文件插入到test.doc中。当任何一个用户保存时,只单独保存他编辑的文件,其他用户的区域不动。这样就达到了同时编辑的效果,并且互不影响。主要是用了pageoffice的拆分文档和合并文档的功能

  1. package com.zhuozhengsoft.samplesspringbootback.controller;
  2. import com.zhuozhengsoft.pageoffice.OpenModeType;
  3. import com.zhuozhengsoft.pageoffice.PageOfficeCtrl;
  4. import com.zhuozhengsoft.pageoffice.wordwriter.DataRegion;
  5. import com.zhuozhengsoft.pageoffice.wordwriter.WordDocument;
  6. import com.zhuozhengsoft.samplesspringbootback.util.GetDirPathUtil;
  7. import org.springframework.web.bind.annotation.RequestMapping;
  8. import org.springframework.web.bind.annotation.RequestMethod;
  9. import org.springframework.web.bind.annotation.RestController;
  10. import org.springframework.web.servlet.ModelAndView;
  11. import javax.servlet.http.HttpServletRequest;
  12. import javax.servlet.http.HttpServletResponse;
  13. import java.io.FileOutputStream;
  14. import java.io.IOException;
  15. import java.util.HashMap;
  16. import java.util.Map;
  17. @RestController
  18. @RequestMapping(value = "/SetDrByUserWord2/")
  19. public class SetDrByUserWord2Controller {
  20. //获取doc目录的磁盘路径
  21. private String dir = GetDirPathUtil.getDirPath() + "static/doc/";
  22. @RequestMapping(value = "Word")
  23. public String showWord(HttpServletRequest request) {
  24. String userName = request.getParameter("user");
  25. //***************************卓正PageOffice组件的使用********************************
  26. WordDocument doc = new WordDocument();
  27. //打开数据区域
  28. DataRegion d1 = doc.openDataRegion("PO_com1");
  29. DataRegion d2 = doc.openDataRegion("PO_com2");
  30. //给数据区域赋值
  31. d1.setValue("[word]/api/doc/SetDrByUserWord2/content1.doc[/word]");
  32. d2.setValue("[word]/api/doc/SetDrByUserWord2/content2.doc[/word]");
  33. //根据登录用户名设置数据区域可编辑性
  34. //甲客户:zhangsan登录后
  35. if (userName.equals("zhangsan")) {
  36. d1.setEditing(true);
  37. //若要将数据区域内容存入文件中,则必须设置属性“setSubmitAsFile”值为true
  38. d1.setSubmitAsFile(true);
  39. d2.setEditing(false);
  40. }
  41. //乙客户:lisi登录后
  42. else if(userName.equals("lisi")) {
  43. d2.setEditing(true);
  44. d2.setSubmitAsFile(true);
  45. d1.setEditing(false);
  46. }
  47. PageOfficeCtrl poCtrl = new PageOfficeCtrl(request);
  48. poCtrl.setWriter(doc);
  49. //添加自定义按钮
  50. poCtrl.addCustomToolButton("保存", "Save", 1);
  51. poCtrl.addCustomToolButton("全屏/还原", "IsFullScreen", 4);
  52. //设置服务器页面
  53. poCtrl.setServerPage("/api/poserver.zz"); //此行必须
  54. //设置保存方法
  55. poCtrl.setSaveDataPage("/api/SetDrByUserWord2/save?userName=" + userName);
  56. //打开Word文档,文档地址可以是磁盘路径也可以是url
  57. poCtrl.webOpen("/api/doc/SetDrByUserWord2/test.doc", OpenModeType.docSubmitForm, userName);
  58. return poCtrl.getHtmlCode("PageOfficeCtrl1");
  59. }
  60. @RequestMapping("save")
  61. public void save(HttpServletRequest request, HttpServletResponse response) throws IOException {
  62. com.zhuozhengsoft.pageoffice.wordreader.WordDocument doc = new com.zhuozhengsoft.pageoffice.wordreader.WordDocument(request, response);
  63. byte[] bytes = null;
  64. String filePath = "";
  65. if (request.getParameter("userName") != null && request.getParameter("userName").trim().equalsIgnoreCase("zhangsan")) {
  66. bytes = doc.openDataRegion("PO_com1").getFileBytes();
  67. filePath = "content1.doc";
  68. } else if(request.getParameter("userName") != null && request.getParameter("userName").trim().equalsIgnoreCase("lisi")) {
  69. bytes = doc.openDataRegion("PO_com2").getFileBytes();
  70. filePath = "content2.doc";
  71. }
  72. doc.close();
  73. filePath = dir + "SetDrByUserWord2/" + filePath;
  74. FileOutputStream outputStream = new FileOutputStream(filePath);
  75. outputStream.write(bytes);
  76. outputStream.flush();
  77. outputStream.close();
  78. }
  79. }

4、最后效果

 

转载:PageOffice调用本地office实现多人在线同时编辑Word文档