- [查看本示例演示效果（Windows版）](https://www.bilibili.com/video/BV1M34y1A7qL?p=1)
- [查看本示例演示效果（国产版）](https://www.bilibili.com/video/BV1eM4m167Lc?p=1)
- 本示例关键代码的编写位置，请参考“开始 - 快速上手”里您所使用的开发语言框架的最简集成代码

> 注意
> 本文中展示的代码均为关键代码，复制粘贴到您的项目中，按照实际的情况，例如文档路径，用户名等做适当修改即可使用。
在使用前后端分离架构开发的OA办公、文档流转等Web系统中，调用PageOffice实现最简单的打开编辑保存文件功能，以Springboot+Vue开发为例，只需以下几步就可以完成。

# 后端代码

在后端编写代码调用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最简单的打开保存文件 | PageOffice 开发者中心](https://pageoffice.cn/pages/10e6ef/)

本示例关键代码的编写位置，请参考“开始 - 快速上手”里您所使用的开发语言框架的最简集成代码

PageOffice最简单的打开保存文件

调用PageOffice实现最简单的打开编辑保存文件

编程语言

前端

PageOffice实现Springboot+Vue文件在线编辑保存功能，提供前后端分离架构下的OA办公解决方案。后端通过PageOfficeCtrl和FileSaver处理文件操作，前端Vue页面调用POBrowser实现文件打开。支持自定义按钮、参数传递，快速集成到Web系统。

服务器

Windows

路由

Linux

JSON

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

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

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

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

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

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

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

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

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

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

社区新版编辑器体验调研

PageOffice最简单的打开保存文件-腾讯云开发者社区-腾讯云

PageOffice最简单的打开保存文件

PageOffice最简单的打开保存文件

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐