qidao123.com ToB IT社区-企服评测·应用市场»论坛 › 数据库 › SQL-Server › 国产linux体系（银河麒麟，统信uos）使用 PageOffice 在 ...

国产linux体系（银河麒麟，统信uos）使用 PageOffice 在线打开Word文件最简单集成代码

[复制链接]
发表于 2026-1-5 02:18:16 | 显示全部楼层 |阅读模式

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要 登录 才可以下载或查看，没有账号？立即注册

×
PageOffice 国产版 ：支持信创体系，支持银河麒麟V10和统信UOS，支持X86（intel、兆芯、海光等）、ARM（飞腾、鲲鹏、麒麟等）、龙芯（LoogArch）芯片架构。
本文形貌了PageOffice产物在（VUE+Springboot）前后端分离的项目中怎样集成调用。
   假设开辟环境电脑IP为：
192.168.1.100
  后端Springboot项目


  • 新建Springboot后端项目：springboot-back，在设置文件application.properties中设置项目端口为：8081
  1. server.port=8081
复制代码

  • 在您项目的pom.xml中通过下面的代码引入PageOffice依赖。pageoffice.jar已发布到Maven中央堆栈，发起使用最新版本。
如果使用Tomcat10及以上版本，使用下面的pom.xml设置
  1. <dependency>
  2.   <groupId>com.zhuozhengsoft</groupId>   
  3.   <artifactId>pageoffice</artifactId>   
  4.   <version>6.3.2.2</version>
  5. </dependency>
复制代码
如果使用Tomcat9及以下的版本，使用下面的pom.xml设置
  1. <dependency>
  2.   <groupId>com.zhuozhengsoft</groupId>   
  3.   <artifactId>pageoffice</artifactId>   
  4.   <version>6.3.2.2-javax</version>
  5. </dependency>
复制代码

  • 新建一个pageoffice文件夹，用来存放PageOffice的体系文件（如license.lic、客户端安装包等），比如windows环境下创建：D:/pageoffice，linux环境下创建:/root/pageoffice
  • 拷贝pageoffice客户端安装步伐到上一步创建的pageoffice文件夹下。


  • 客户端是windows环境：拷贝posetup_6.3.2.2.exe到pageoffice文件夹下；
  • 客户端是国产操纵体系环境：拷贝对应芯片的PageOffice客户端deb安装包到pageoffice文件夹下；
   PageOffice客户端安装步伐下载地点：https://gitee.com/pageoffice/pageoffice6-client/releases
  

  • 打开springboot-back项目的设置文件application.properties，添加一个posyspath变量，值为上一步创建的pageoffice文件夹的路径
  1. server.port=8081
  2. posyspath=D:/pageoffice
复制代码

  • 在您项目的启动类Application类中添加一项@Bean设置，此为PageOffice服务器端的须要设置，代码如下：
  1. @Value("${posyspath}")
  2. private String poSysPath;
  4. @Bean
  5. public ServletRegistrationBean pageofficeRegistrationBean()  {
  6.   com.zhuozhengsoft.pageoffice.poserver.Server poserver
  7.                                                       = new com.zhuozhengsoft.pageoffice.poserver.Server();
  8.   poserver.setSysPath(poSysPath);//设置PageOffice注册成功后,license.lic文件存放的目录
  9.    
  10.   ServletRegistrationBean srb = new ServletRegistrationBean(poserver);
  11.   srb.addUrlMappings("/poserver.zz");
  12.   srb.addUrlMappings("/poclient");
  13.   srb.addUrlMappings("/sealsetup.exe");
  14.   return srb;
  15. }
复制代码
  留意：在现实开辟中，您的后端项目中必须将PageOffice相干设置哀求从后端拦截器SpringSecurity大概Shiro等授权认证校验框架中放出来。比方：
  

  • SpringSecurity
  1. antMatchers("/poserver.zz","/poclient","/sealsetup.exe").permitAll()
复制代码


  • Shiro
  1. filterChainDefinitionMap.put("/poserver.zz", "anon");
  2. filterChainDefinitionMap.put("/poclient", "anon");
  3. filterChainDefinitionMap.put("/sealsetup.exe", "anon");
复制代码

  • 新建Controller并调用PageOffice在线打开文件，比方DocumentController代码如下：
  1. @RestController
  2. @RequestMapping(value = "/doc")
  3. public class DocumentController {
  4.         //获取doc目录的磁盘路径
  5.         private String dir = GetDirPathUtil.getDirPath() + "static/";
  7.         @RequestMapping(value="/openFile")
  8.         public String openFile(HttpServletRequest request,int file_id,String file_name)  {
  9.                 //file_id和file_name是为了展示如何使用参数，我们这里只用到了file_name
  10.                 PageOfficeCtrl poCtrl = new PageOfficeCtrl(request);
  11.                 //webOpen的第一个参数支持能够输出下载文件的Url相对地址或者文件在服务器上的磁盘路径两种方式
  12.                 //查看详细，请在"https://www.pageoffice.cn/"搜索“PageOffice属性或方法中涉及到的URL路径或磁盘路径的说明”
  13.                 poCtrl.webOpen("file://"+dir+file_name, OpenModeType.docNormalEdit, "张三");
  14.                 return poCtrl.getHtmlCode();//必须
  15.         }
  17.         @RequestMapping("/saveFile")
  18.         public void saveFile(HttpServletRequest request, HttpServletResponse response,int file_id,String file_name)  {
  19.                 //file_id和file_name是为了展示如何使用参数，我们这里只用到了file_name
  20.                 FileSaver fs = new FileSaver(request, response);
  21.                 fs.saveToFile(dir + file_name);
  22.                 fs.close();
  23.         }
  24. }
复制代码
前端vue项目


  • 新建Vue前端项目：vue-front
  • Vue设置署理。
  1.   devServer: {
  2.     proxy: {
  3.       '/dev-api': { // "/dev-api"对应后端项目"http://192.168.1.100:8081"地址
  4.         target: 'http://192.168.1.100:8081',
  5.         ws: true,
  6.         changeOrigin: true,
  7.         pathRewrite: {
  8.         '^/dev-api': ''   
  9.         }
  10.       },
  11.     }
  12.   }
复制代码

  • 引用js-pageoffice库。
   留意：请确保安装的js-pageoffice库版本号与后端项目pom.xml文件中引用的PageOffice JAR包版本号的前三位雷同。
  ​ 使用下令安装：npm install [email protected] --save-exact

  • 在全局拦截器中添加PageOffice相干设置。
  1. import axios from "axios";
  2. import { POBrowser } from "js-pageoffice";
  4. // 创建 axios 实例
  5. const service = axios.create({
  6. baseURL: "/dev-api", // 设置你的基础 URL
  7. timeout: 5000, // 设置请求超时时间
  8. });
  9. // 请求拦截器
  10. service.interceptors.request.use(
  11.   (config) => {
  12.     // 在发送请求之前做些什么
  13.     //const token = Cookies.get('token'); // 假设你的token存储在cookie中
  14.     const token = "123";
  15.     if (token) {
  16.       config.headers["Authorization"] = "Bearer " + token; // 将token添加到请求头中
  17.       // PageOffice全局配置，必须在此拦截器中定义
  18.       //必须。设置后端代理,具体属性值以您实际开发为准,比如POBrowser.setProxyBaseAPI(process.env.VUE_APP_BASE_API);
  19.       POBrowser.setProxyBaseAPI("/dev-api");
  20.       //必须。向PageOffice后端请求设置header，支持多次调用setHeader()设置更多的值，具体属性名称和属性值以您实际开发为准。
  21.       POBrowser.setHeader("Authorization", "Bearer " + token);
  22.       /**
  23.        * 前端存储token的方案
  24.        *方案1.使用Cookie
  25.        *如果您的令牌(token)存储在Cookie中，PageOffice会默认支持通过Cookie方式保存令牌，因此您无需编写任何额外的代码。
  26.        *方案2.使用Localstorage或者SessionStorage
  27.        *如果令牌(token)是保存在LocalStorage或SessionStorage中，您必须调用POBrowser.setStorage()方法。
  28.        */
  29.       //POBrowser.setStorage("Admin-Token",getToken());//支持多次调用setStorage()设置更多的值，具体属性名称和属性值以您实际开发为准。
  30.     }
  32.     return config;
  33.   },
  34.   (error) => {
  35.     // 对请求错误做些什么
  36.     return Promise.reject(error);
  37.   }
  38. );
复制代码

  • 新建一个Vue页面：src/views/DocView.vue，用来表如今线打开的文档。
  1. <template>
  2.    <div class="doc">
  3.      演示: 文档<br /><br />
  4.      <!-- 此div用来加载PageOffice客户端控件，其中div的高宽及位置就决定了控件的大小及位置 -->
  5.      <div style="width:auto; height:900px;" v-html="poHtmlCode"></div>
  6.    </div>
  7. </template>
  9. <script>
  10. import request from '@/utils/request'
  11. export default {
  12.    name: 'DocView',
  13.    data() {
  14.      return {
  15.        poHtmlCode: '',
  16.        open_params: '',
  17.      }
  18.    },
  19.    created: function () {
  20.      //使用pageofficectrl.WindowParams获取获取父页面(此项目中为：HomeView.vue)中POBrowser.openWindow()方法的第三个参数的值,获取到的值为string类型
  21.      this.open_params = JSON.parse(pageofficectrl.WindowParams);
  22.      // 请求后端打开文件
  23.      this.openFile().then(response => {
  24.        this.poHtmlCode = response;
  25.      }
  26.      );
  28.    },
  29.    methods: {
  30.      OnPageOfficeCtrlInit() {
  31.        //PageOffice的初始化事件回调函数，您可以在这里添加自定义按钮
  32.        pageofficectrl.AddCustomToolButton("保存", "Save", 1);//其中"Save"对应methods中的Save()函数，并且需要在mounted中挂载。
  33.      },
  34.      Save() {
  35.        //使用SaveFilePage属性设置后端保存方法的Controller路由地址，这个地址必须从"/"开始，并且也可以向此路由地址传递json字符串参数，示例如下：
  36.        let saveFileUrl = "/doc/saveFile";
  37.        let paramValue = new URLSearchParams(this.open_params);//为了简单起见，这里直接使用打开时的参数。
  38.        pageofficectrl.SaveFilePage = `${saveFileUrl}?${paramValue.toString()}`;
  39.        //在这里写您保存前的代码
  40.        pageofficectrl.WebSave();
  41.        //在这里写您保存后的代码，比如判断保存结果pageofficectrl.CustomSaveResult
  42.        //alert(pageofficectrl.CustomSaveResult);
  43.      },
  44.      AfterDocumentOpened() {
  45.        //在这里写您文档打开后自动触发的代码
  46.      },
  47.      openFile() {
  48.        //发起GET请求到后端Controller的/doc/openFile路由
  49.        return request({
  50.          url: '/doc/openFile',
  51.          method: 'get',
  52.          params: this.open_params
  53.        })
  54.      }
  55.    },
  56.    mounted: function () {
  57.      //将当前页面methods中定义的函数挂载到PageOffice控件，例如控件触发的事件、自定义按钮触发的函数。
  58.      window.POPageMounted = this;//此行必须
  59.    }
  60. }
  61. </script>
复制代码

  • 设置DocView.vue的访问路由。
  1. const routes = [
  2.   // 其他路由配置项...
  3.   // 下面添加DocView.vue的路由
  4.   ,
  5.   {
  6.     path: '/showDoc',
  7.     name: 'doc',
  8.     component: () => import('../views/DocView.vue')
  9.   }
  10. ]
复制代码

  • 在您的Vue页面（比如HomeView.vue，PageOffice中把这个页面称之为父页面）添加一个打开文件的超链接，点击超链接调用POBrowser对象的openWindow方法，弹出PageOffice欣赏器（POBrowser）窗口访问DocView.vue在线打开文件，代码如下：
  1. <a  href="#" @click.prevent="open_pageoffice()">打开文件</a>
复制代码
  1. <script>
  2. import request from '@/utils/request'
  3. import { POBrowser } from 'js-pageoffice'
  4. export default {
  5.   name: 'HomeView',
  6.   methods: {
  7.     open_pageoffice() {
  8.       let paramJson={};
  9.       paramJson.file_id=1;
  10.       paramJson.file_name="test.doc";
  11.       let paramString=JSON.stringify(paramJson);
  13.       //openWindow()第三个参数用来向弹出的PageOffice浏览器（POBrowser）窗口传递参数(参数长度不限)，支持json格式字符串。
  14.       //此处为了方便演示，我们传递了file_id和file_name两个参数，具体以您实际开发为准。
  15.       POBrowser.openWindow('/showDoc', 'width=1150px;height=900px;',paramString);
  16.     },
  17.   }
  18. }
  19. </script>
复制代码

  • 启动springboot-back和vue-front项目，点击“打开文件”超链接，查察在线打开编辑生存Word文件的结果。
参考链接：PageOffice最简集成代码(VUE+Springboot)
回复

使用道具 举报

返回列表

汕尾海湾
+ 我要发帖

登录后关闭弹窗

登录参与点评抽奖  加入IT实名职场社区
去登录
快速回复 返回顶部 返回列表