PageOffice 国产版 ：支持信创系统，支持银河麒麟V10和统信UOS，支持X86（intel、兆芯、海光等）、ARM（飞腾、鲲鹏、麒麟等）、龙芯（LoogArch、MIPS）芯片架构。

[查看本示例演示效果](https://www.bilibili.com/video/BV1M34y1A7qL/?p=1 "查看本示例演示效果")
本示例关键代码的编写位置
[Vue+Springboot](https://pageoffice.cn/pages/f76d87/ "Vue+Springboot")

> 注意
本文中展示的代码均为关键代码，复制粘贴到您的项目中，按照实际的情况，例如文档路径，用户名等做适当修改即可使用。

在OA办公、文档流转等各个Web系统中，实现最简单的打开编辑保存文件功能，调用PageOffice只需要几行代码就可以完成。

# 后端代码
在后端编写代码调用PageOfficeCtrl对象打开文件，调用FileSaver对象处理文件的保存，具体代码如下：
```
	@RequestMapping(value="/openFile")
	public String openFile(HttpServletRequest request,int file_id,String file_name)  {
		//file_id和file_name是为了展示如何使用参数，我们这里只用到了file_name
		PageOfficeCtrl poCtrl = new PageOfficeCtrl(request);
		//webOpen的第一个参数可以是文件在服务器上的磁盘路径，以Linux为例（如果是Windows则去掉file://）代码如下
		poCtrl.webOpen("file://"+"/home/docs/"+file_name, OpenModeType.docNormalEdit, "张三");
    //poCtrl.webOpen("D:\\docs\\"+file_name, OpenModeType.docNormalEdit, "张三");
		return poCtrl.getHtml();//必须
	}

	@RequestMapping("/saveFile")
	public void saveFile(HttpServletRequest request, HttpServletResponse response,int file_id,String file_name)  {
	  //file_id和file_name是为了展示如何使用参数，我们这里只用到了file_name
	  FileSaver fs = new FileSaver(request, response);
	  fs.saveToFile(dir + file_name);
	  fs.close();
	}
```
# 前端代码

1. 在您的Vue页面（比如HomeView.vue）添加一个打开文件的超链接，点击超链接调用POBrowser对象的openWindow方法，弹出PageOffice浏览器（POBrowser）窗口访问DocView.vue（比如，DocView.vue的访问路由是'/showDoc'）在线打开文件，代码如下：

```
 <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>
```
1. 编写DocView.vue页面的代码，实现集成PageOffice打开文件，代码如下：

```
 <template>
   <div class="doc">
     演示: 文档<br /><br />
     
     <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获取获取父页面(执行POBrowser.openWindow方法的页面，比如：HomeView.vue)中POBrowser.openWindow()方法的第三个参数的值,获取到的值为string类型
     this.open_params = JSON.parse(pageofficectrl.WindowParams);
     // 请求后端打开文件
     this.openFile().then(response => {
       this.poHtmlCode = response;
     });
   },
   methods: {
     OnPageOfficeCtrlInit() {
       //PageOffice的初始化事件回调函数，您可以在这里添加自定义按钮
       pageofficectrl.AddCustomToolButton("保存", "Save", 1);//其中"Save"对应methods中的Save()函数，并且需要在mounted中挂载。
     },
     Save() {
       //使用SaveFilePage属性设置后端保存方法的Controller路由地址，这个地址必须从"/"开始，并且也可以向此路由地址传递json字符串参数，示例如下：
       let saveFileUrl = "/doc/saveFile";
       let paramValue = new URLSearchParams(this.open_params);//为了简单起见，这里直接使用打开时的参数。
       pageofficectrl.SaveFilePage = `${saveFileUrl}?${paramValue.toString()}`;
       pageofficectrl.WebSave();
     },
     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>
```
参考链接：[PageOffice最简单的打开保存文件](https://pageoffice.cn/pages/10e6ef/)

PageOffice 国产版 ：支持信创系统，支持银河麒麟V10和统信UOS，支持X86（intel、兆芯、海光等）、ARM（飞腾、鲲鹏、麒麟等）、龙芯（LoogArch、MIPS）芯片架构。

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

PageOffice不是普通的办公软件，而是一款专为政府、企事业单位内部管理系统设计的在线文档编辑控件。主要功能是管理软件系统能够在浏览器中直接打开编辑真正Word文档，无需离开系统或依赖外部云服务。

编程语言

PageOffice国产版支持信创系统，兼容银河麒麟V10和统信UOS，适配X86、ARM、龙芯等多种芯片架构。通过Vue+Springboot快速实现OA办公系统中的文档在线编辑功能，仅需几行代码即可完成文件打开、编辑和保存操作，支持跨平台部署，提升办公效率。

服务器

Windows

路由

Linux

JSON

4核4G3M云服务器 新用户低至38元/年！

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云AI代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

功能1上新10个字符

功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符。

功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符。

功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符

功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符

功能4上新

文章&问答评论现已支持表情

全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验

社区富文本编辑器全新改版！诚邀体验～ 

精选全网热门MCP server，让你的AI更好用 🚀

💥开发者 MCP广场重磅上线！

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

国产linux系统（银河麒麟，统信uos）使用 PageOffice 在线打开Word文件最简单集成代码-腾讯云开发者社区-腾讯云

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

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

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐